6

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

4

2 回答 2

21

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

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

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

通过为 指定一个附加selector参数.on()：

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

请注意，您的 HTML 当前无效。<li>元素仅在<ul>s、<ol>s 和<menu>s 内有效。

于 2013-01-19T20:21:21.333 回答
1

您可以使用委托事件：

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

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

于 2013-01-19T20:21:10.533 回答