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

Answer 2

我认为你不想find。只是做

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

Answer 3

尝试这样做：

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

点击此处：http://jsfiddle.net/wDzkW/4/