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

我有一个动态生成的列表，然后单击该项并将

index（）

传递给另一个函数

问题是，此列表正在动态填充，当我单击

事件时，我的代码没有响应。但是，如果我在列表中添加几个静态li元素，除了动态填充的元素外，这些静态元素也可以工作。这很奇怪

一些代码：

这将动态创建列表：

function SetOpenRecentURL( openRecentURL ) {

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

带有几个静态Li的HTML

<div class="recentProjects" id="recentProjectsId">
<li>Test 1</li>
<li>Test 2</li>
        </div>


测试1
测试2

当我运行我的程序时，我的列表看起来很完美，包括我的静态li和动态li，但我不能单击动态li，只能单击静态li。
您可以使用：

这里的
#recentProjectsId
是
的父元素

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

这是因为，您的代码绑定
单击
处理程序的方式，仅在绑定侦听器时绑定到页面中的元素。设置click listener，它将通过利用事件委派来工作：

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

通过为
.on（）
指定一个附加的
选择器
参数：

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


请注意，您的HTML当前无效
 您的标记无效，因为
元素不能有
父元素。工作正常！我以为
.on（）
而不是
。click（）
是为我处理的，我想不是。谢谢你的帮助，你很亲密。使用
.on（）
可以让您获得95%的成功。就像cham一样工作
$("#recentProjectsId").on("click", "li", function() {
    var projIndex = $(this).index();
    console.log(projIndex)
    OpenProject()
});

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