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);
}

}

Solution 1

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

Solution 2

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