Question

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

Answer 1

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

这是因为，代码绑定click处理程序的方式，它只绑定到绑定侦听器时页面中的元素。设置点击监听器just a little differently，它将通过利用事件委派来实现：

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

为selector指定一个额外的.on()参数：

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

请注意，您的HTML目前无效。 <li> elements are only valid inside of <ul>s, <ol>s, and <menu>s.

Answer 2

您可以使用delegated events：

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

此处#recentProjectsId是<li>的父元素。

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

2 个答案: