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

Click event on dynamically generated list items using jquery

本文关键字：列表 单击 event jquery 动态 使用      更新时间：2023-09-26

我有一个动态生成的列表，然后我点击项目并将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和我的动态li，但是我不能点击动态li，只能点击静态li

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

这是因为，您的代码绑定click处理程序的方式，在绑定侦听器时，它仅绑定到页面中的元素。点击监听器的设置稍微不同，它就会工作，通过利用事件委托:

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

通过为.on()指定一个额外的selector参数:

一个选择器字符串，用于筛选触发事件的选定元素的后代。如果选择器为空或省略，则该事件总是在到达所选元素时触发。

注意你的HTML目前是无效的。<li>元素只在<ul> s、<ol> s和<menu> s内有效。

您可以使用委托事件:

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

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

相关文章：