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

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 和我的动态 li，但我无法点击动态的，只能点击静态的。

Answer 1

When I run my program my list looks perfect and includes my static li plus my dynamic ones, but I cannot click on the dynamic ones, only static.

那是因为，您的代码绑定(bind) click 的方式处理程序，它仅在绑定(bind)监听器时绑定(bind)到页面中的元素。设置点击监听器 just a little differently它会通过利用事件委托(delegate)来工作:

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

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

A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

---

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