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

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

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

一些代码：

这会动态创建列表：

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 和动态列表，但我无法单击动态列表，只能单击静态列表。

那是因为，您的代码绑定的方式click处理程序，它仅在绑定侦听器时绑定到页面中的元素。设置点击监听器只是有点不同 http://api.jquery.com/on/它将通过利用事件委托来发挥作用：

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

通过指定一个额外的selector论证.on():

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

请注意，您的 HTML 目前无效。<li>元素仅在以下范围内有效<ul>s, <ol>s, and <menu>s. http://www.w3.org/TR/html5/grouping-content.html#the-li-element