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)

Answer 2

我不认为你想要find。做就是了

console.log($(this).data('test'));

Answer 3

尝试这样做：

 console.log($(this).data('test'));

在这里检查：http: //jsfiddle.net/wDzkW/4/