Question

Lets say I have a list where the li are created dynamically, via AJAX :

​<ul id="demo-list"> 
    <li data-test="test1" >Test 1</li>
    <li data-test="test2" >Test 2</li>
    <li data-test="test3" >Test 3</li>
</ul>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

When one of the li is clicked, I want to get the data attribute test of that particular li.

I tried something like :

$('#demo-list').on('click', 'li', function() {
    console.log($(this).find('li').data('test'));
});

But it obviously gets all the list items and not just the particular one where the event happens.

Also, I know how to do this with .live(), but my question is how to do it via .on()

Answer 1

You have to remove the find from after your $(this) call:

$('#demo-list').on('click', 'li', function() {
console.log($(this).data('test'));
})

You can find the working example bellow:

http://jsfiddle.net/P356B/2/

EDIT:

if you have a widget/plugin that generates that content perhaps you could just attach the click event handler in the plugin. or have a construct such as:

(function($){
  $(function(){
   $('#demo-list').on('click', 'li', function() {
   console.log($(this).data('test'));
   })
  });
})(jQuery)