How to get element data within click function?

Question

Is there a tidier/easier way of getting the checkbox element's 'catNum' value when in its click() function?

function createCategoriesList() {

var catNames = new Array("First cat", "Second cat", "Third cat");
var catImageURLs = new Array("First.png", "Second.png", "Third.png");

jQuery('<ul/>', {
    id: 'map-cats'
}).appendTo('#map-controls');

for(var i = 0; i < catNames.length; i++ ) {

    var listItem = jQuery('<li/>').appendTo('#map-cats');

    jQuery('<img/>', {
        src: catImageURLs[i],
        alt: ''

    }).appendTo(listItem);

    var checkbox = jQuery('<input/>', {
        type: 'checkbox',
        checked: 'checked',
        id: 'cat_' + i,
        name: 'cat_' + i

    }).appendTo(listItem);
    checkbox.data("catNum", i);

    checkbox.click(function() {
        //alert("The cat num selected is: " + this.data("catNum")); //throws exception
        alert("The cat num selected is: " + jQuery('#' + this.id).data('catNum')); //works but there must be a better way??
    });

    jQuery('<label/>', {
        htmlFor: catImageURLs[i],
        text: catNames[i],
        for: 'cat_' + i

    }).appendTo(listItem);
}

}

Spudley · Accepted Answer · 2013-11-15 13:54:21Z

6

The element that comes into the click function is a raw DOM object, not a jQuery object, so in order to use jQuery methods on it, we have to pass it through jQuery first. This is why this.data("catNum") doesn't work in your example code.

But the jQuery() function can accept DOM objects as well as selector strings, so instead of

jQuery('#' + this.id)

you can just use

jQuery(this)

Which as you wanted, a lot tidier.

Alternatively, you can use this as a raw DOM object, but you'd need to use the DOM methods with it rather than the jQuery methods:

this.dataset.catNum      //for modern HTML5 browsers.

or

this.getAttribute("data-catNum")   //works in all browsers

edited Nov 15, 2013 at 13:54

answered Nov 15, 2013 at 13:48

Spudley

169k39 gold badges240 silver badges309 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jah · Accepted Answer · 2013-11-15 13:47:59Z

4

checkbox.click(function() {
    alert("The cat num selected is: " + jQuery(this).data('catNum'));
});

answered Nov 15, 2013 at 13:47

jah

1,30510 silver badges21 bronze badges

Comments

NotJustin · Accepted Answer · 2013-11-15 14:42:07Z

My two cents. Sorry for more extensive answer than asked / I planned. Might have typos but seems to work at js fiddle:

$(function(){
    createCategoriesList();
});

function createCategoriesList() {
    var catNames = new Array("First cat", "Second cat", "Third cat");
    var catImageURLs = new Array("First.png", "Second.png", "Third.png");

    var output = '<ul id="map-cats">';
    $.each(catNames, function(i, v) {
      output += '<li>';
      output += '<label for="cat_'+i+'">'+v+'</label>';
      output += '<input type="checkbox" id="cat_'+i+'" name="cat_'+i+'" data-catnum="'+i+'" />';
      output += '<img src="'+catImageURLs[i]+'" alt="" title="" />';
      output += '</li>';
    });
    output += '</ul>';
    $("#map-controls").html(output);
    $("#map-cats").on("click", "input",  function(){
        alert($(this).data("catnum"));
    });
}

Collectives™ on Stack Overflow

How to get element data within click function?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related