Javascript 使用 jquery 在动态生成的列表项上单击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14418451/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Click event on dynamically generated list items using jquery
提问by Rob
I have a list being dynamically generated and then I click on the item and pass the index()to another function.
我有一个动态生成的列表，然后单击该项目并将其传递index()给另一个函数。
The problem is that this list is being populated dynamically and my code does not respond when I do clickevent. BUT, if I add a couple of Static li elements to the list in addition to the dynamically populated ones those Static ones work. Its very odd.
问题是这个列表是动态填充的，当我执行click事件时我的代码没有响应。但是，如果除了动态填充的那些静态元素之外，我还向列表中添加了几个静态 li 元素。它很奇怪。
Some code:
一些代码：
This dynamically creates the list:
这会动态创建列表：
function SetOpenRecentURL( openRecentURL ) {
$('#recentProjectsId').append('<li>' + openRecentURL + '</li>')
}
This is the click event to pass the Index():
这是传递 Index() 的点击事件：
$('#recentProjectsId li').on('click', function () {
var projIndex = $(this).index();
console.log(projIndex)
OpenProject()
})
The HTML with a few Static Li's
带有一些 Static Li 的 HTML
<div class="recentProjects" id="recentProjectsId">
<li>Test 1</li>
<li>Test 2</li>
</div>
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.
当我运行我的程序时，我的列表看起来很完美，包括我的静态 li 和动态的，但我不能点击动态的，只能点击静态的。
回答by Matt Ball
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.
当我运行我的程序时，我的列表看起来很完美，包括我的静态 li 和动态的，但我不能点击动态的，只能点击静态的。
That's because, the way your code binds the clickhandler, it is only bound to elements in the page at the time that the the listener is bound. Set up the click listener just a little differentlyand it will work, by taking advantage of event delegation:
这是因为，您的代码绑定click处理程序的方式仅在绑定侦听器时绑定到页面中的元素。以稍微不同的方式设置点击侦听器，它会通过利用事件委托来工作：
$('#recentProjectsId').on('click', 'li', function () {
// snip...
});
By specifying an additional selectorargument to .on():
通过为 指定一个额外的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.
一个选择器字符串，用于过滤触发事件的选定元素的后代。如果选择器为 null 或省略，则始终在到达所选元素时触发事件。
Note that your HTML is currently invalid. <li>elements are only valid inside of <ul>s, <ol>s, and <menu>s.
请注意，您的 HTML 当前无效。<li>元素仅在<ul>s、<ol>s 和<menu>s内有效。
回答by VisioN
You may use delegated events:
您可以使用委托事件：
$("#recentProjectsId").on("click", "li", function() {
var projIndex = $(this).index();
console.log(projIndex)
OpenProject()
});
Here #recentProjectsIdis the parent element of <li>.
这#recentProjectsId是 的父元素<li>。
