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

Question

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

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

一些代码:

这会动态创建列表:

function SetOpenRecentURL( openRecentURL ) {

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

这是传递Index()的click事件:

$('#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和我的动态,但我不能点击动态的,只有静态.

Answer 1

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

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

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

通过指定附加selector参数.on():

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

请注意,您的HTML目前无效.<li>元素仅在<ul>s,<ol>s和<menu>s 内有效.