使用jquery在动态生成的列表项上单击事件

我有一个动态生成的列表，然后我点击该项目并将index()传递给另一个函数。

问题是这个列表是动态填充的，当我click事件时我的代码没有响应。 但是，如果我在列表中添加了几个静态li元素，除了动态填充的元素之外，那些静态元素也可以工作。 很奇怪。

一些代码：

这会动态创建列表：

 function SetOpenRecentURL( openRecentURL ) { $('#recentProjectsId').append('
' + openRecentURL + '
') } 

这是传递Index（）的click事件：

 $('#recentProjectsId li').on('click', function () { var projIndex = $(this).index(); console.log(projIndex) OpenProject() }) 

带有一些静态Li的HTML

 
 
Test 1
 
Test 2
  

当我运行我的程序时，我的列表看起来很完美，包括我的静态li和我的动态，但我不能点击动态的，只有静态。

Answer 1

当我运行我的程序时，我的列表看起来很完美，包括我的静态li和我的动态，但我不能点击动态的，只有静态。

这是因为，您的代码绑定click处理程序的方式，它只绑定到绑定侦听器时页面中的元素。 通过利用事件委托来设置点击监听器的方式略有不同 ，它将起作用：

 $('#recentProjectsId').on('click', 'li', function () { // snip... }); 

通过为.on()指定其他selector参数：

一个选择器字符串，用于过滤触发事件的所选元素的后代。 如果选择器为null或省略，则事件始终在到达所选元素时触发。

---

请注意，您的HTML目前无效。

元素仅在

s，

和

。

Answer 2

您可以使用委派的事件 ：

 $("#recentProjectsId").on("click", "li", function() { var projIndex = $(this).index(); console.log(projIndex) OpenProject() }); 

这里#recentProjectsId是

的父元素。