Question

案例1：列表已存在于html中

<ul id="list1">
    <li>One</li>
    <li>Two</li>
</ul>

使用

检测单击的li元素

$('#list1 li').bind('click', function(){
   alert($(this).html());
});

以上工作正常。

案例2：

现在如果以动态方式添加列表

<div id="testDiv">
</div>

var output = '<ul id="list1">' +
             '<li>One</li>' + 
             '<li>Two</li>' +
             '</ul>';

$('#testDiv').html(output);

我尝试使用相同的代码检测单击的li元素

$('#list1 li').bind('click', function(){
    alert($(this).html());
});

在这种情况下，它不会检测到

Answer 1

假设你已经正确加载了jQuery，并且你将jQuery相关代码放在"document ready"处理程序中，我建议“事件委托”，这样你就是在静态祖先元素上注册单个事件处理程序。

li后代中收到的点击将“冒泡”到祖先元素，但jQuery将确保this设置为实际点击的元素：

$('#testDiv').on('click', 'li', function() {
    console.log(this);
});

只要静态祖先仍然存在于页面上，您就可以根据需要动态更改其内容，并且事件处理程序将继续工作。

使用jquery检测单击了哪个列表元素（动态添加列表）

1 个答案: