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

}

Answer 1

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

Answer 2

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

Answer 3

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