使用jQuery在动态生成的列表项上绑定点击事件

Question

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

问题是这个列表是动态填充的，当我执行click事件时，我的代码无响应。但是，如果我在列表中添加一些静态元素，除了动态填充的元素外，那些静态元素可以正常工作。这很奇怪。

一些代码：

这是动态创建列表的代码：

function SetOpenRecentURL( openRecentURL ) {

 $('#recentProjectsId').append('<li>' + openRecentURL + '</li>')
 }

这是传递Index()函数的点击事件：

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

    })

带有几个静态Li的HTML

<div class="recentProjects" id="recentProjectsId">
<li>Test 1</li>
<li>Test 2</li>
        </div>

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

- Rob

---

您的标记无效，因为<li>元素不能有<div>父元素。 - VisioN

Answer 1

当我运行我的程序时，我的列表看起来很完美，包括我的静态li和动态li，但我无法点击动态li，只能点击静态的。这是因为您的代码绑定了click事件处理程序的方式，只绑定到在绑定监听器时页面中存在的元素上。稍微修改一下你设置click监听器的方法，并利用事件代理机制，就可以使其正常工作。

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

通过向.on()添加附加的selector参数：

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

---

请注意，您的HTML当前无效。<li>元素仅在<ul>，<ol>和<menu>内部有效。

- Matt Ball

---

工作得非常完美！我以为使用.on()而不是.click()会自动处理，看来并不是这样。谢谢你的帮助。 - Rob

你非常接近了。使用.on()让你完成了95%的工作。 - Matt Ball

像个行家一样工作。 - joeabala

Answer 2

您可以使用委托事件：

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

这里的#recentProjectsId是<li>的父元素。

- VisioN