使用jquery检测单击了哪个列表元素（动态添加列表）

案例1：列表已存在于html中

 
One
 
Two
  

使用单击检测单击的li元素

 $('#list1 li').bind('click', function(){ alert($(this).html()); }); 

以上工作正常。

案例2：

现在，如果列表是以动态方式添加的

 
 
 var output = '
' + '
One
' + '
Two
' + '
'; $('#testDiv').html(output); 

我尝试使用相同的代码检测单击的li元素

 $('#list1 li').bind('click', function(){ alert($(this).html()); }); 

在这种情况下，它不会检测到

Answer 1

假设您已正确加载jQuery，并且将jQuery相关代码放在“文档就绪”处理程序中，我建议使用“事件委托”，这样您只需在静态祖先元素上注册单个事件处理程序。

在li后代中收到的点击将“冒泡”到祖先元素，但jQuery将确保将this设置为实际点击的元素：

 $('#testDiv').on('click', 'li', function() { console.log(this); }); 

只要静态祖先仍然存在于页面上，您就可以根据需要动态更改其内容，并且事件处理程序将继续工作。