ajax - 在动态创建的元素上使用 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/

编辑:

如果您有一个生成该内容的小部件/插件，也许您可​​以在插件中附加单击事件处理程序。或者有一个结构，例如:

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