[英]Click event on dynamically generated list items using jquery
我有一个动态生成的列表,然后我点击该项目并将index()
传递给另一个函数。
问题是这个列表是动态填充的,当我click
事件时我的代码没有响应。 但是,如果我在列表中添加一些静态li元素,除了动态填充的元素,那些静态元素也可以工作。 这很奇怪。
一些代码:
这会动态创建列表:
function SetOpenRecentURL( openRecentURL ) {
$('#recentProjectsId').append('<li>' + openRecentURL + '</li>')
}
这是传递Index()的click事件:
$('#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和我的动态,但我不能点击动态的,只有静态。
这是因为,您的代码绑定click
处理程序的方式,它只绑定到绑定侦听器时页面中的元素。 通过利用事件委托来设置点击监听器的方式略有不同 ,它将起作用:
$('#recentProjectsId').on('click', 'li', function () {
// snip...
});
通过为.on()
指定其他selector
参数:
一个选择器字符串,用于过滤触发事件的所选元素的后代。 如果选择器为null或省略,则事件始终在到达所选元素时触发。
请注意,您的HTML目前无效。 <li>
元素仅在<ul>
s, <ol>
和<menu>
。
您可以使用委派活动 :
$("#recentProjectsId").on("click", "li", function() {
var projIndex = $(this).index();
console.log(projIndex)
OpenProject()
});
这里#recentProjectsId
是<li>
的父元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.