在动态创建的元素上使用jQuery时查找$(this)

Question

假设我有一个列表li,通过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>?????????????????????????????????????????????????????????????????????????????????????

当li单击其中一个时,我想获得该特定的数据属性测试li.

我尝试过类似的东西:

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

但它显然得到了所有列表项,而不仅仅是事件发生的特定项.

另外,我知道如何使用.live(),但我的问题是如何通过.on()

Answer 1

您必须在$(this)通话后删除查找:

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

您可以在下面找到工作示例:

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

编辑:

如果你有一个生成该内容的小部件/插件,也许你可以在插件中附加click事件处理程序.或者有一个如下构造:

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