title: How to get element data within click function?
body: <p>Is there a tidier/easier way of getting the checkbox element's 'catNum' value when in its click() function?</p>
  
  <pre><code>function createCategoriesList() {
  
  var catNames = new Array("First cat", "Second cat", "Third cat");
  var catImageURLs = new Array("First.png", "Second.png", "Third.png");
  
  jQuery('&lt;ul/&gt;', {
      id: 'map-cats'
  }).appendTo('#map-controls');
  
  for(var i = 0; i &lt; catNames.length; i++ ) {
  
      var listItem = jQuery('&lt;li/&gt;').appendTo('#map-cats');
  
      jQuery('&lt;img/&gt;', {
          src: catImageURLs[i],
          alt: ''
  
      }).appendTo(listItem);
  
      var checkbox = jQuery('&lt;input/&gt;', {
          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('&lt;label/&gt;', {
          htmlFor: catImageURLs[i],
          text: catNames[i],
          for: 'cat_' + i
  
      }).appendTo(listItem);
  }
  </code></pre>
  
  <p>}</p>