javascript - 尝试将元素动态添加到 <ul> 标记时，单击事件不起作用

Question

我正在尝试创建一个列表，在您单击该列表后，会在其中添加新的 li 标记，但单击 li 标记后没有任何反应。 当我尝试这样做时:

$('ul').click(function(){

    $("ul").append('<li>aaaaaaaaaaa</li>');
    }).children().click(function(e) {
       return false;
    });

一切似乎都很好。当我单击列表主体时，会添加新元素，而当我单击先前声明的 li 标记时，不会发生任何情况。但是，单击新添加到列表中的元素后，将添加另一个新元素。 这是为什么？我能做什么？

Answer 1

您的代码仅将 .click(function(e) { return false; }); 处理程序应用于应用其他点击处理程序时已存在的子级。

jQuery 支持动态事件绑定(bind)方法，该方法会自动将处理程序绑定(bind)到新节点:

$('ul')
.on('click', function(e) {
   $(this).append('<li>aaaaaaaaaaa</li>');
})
.on('click', 'li', function(e) {
   return false;
});

这应该将一个点击事件绑定(bind)到ul，从而创建一个新的li，同时还为该下的所有li绑定(bind)一个事件处理程序ul 无论它们是否动态创建。

您可以在 jQuery API documentation 中阅读有关 .on 方法的更多信息。 .

$('ul')
.on('click', function(e) {
   $(this).append('<li>aaaaaaaaaaa</li>');
})
.on('click', 'li', function(e) {
   return false;
});

ul {
    border: 1px solid red;
}

li {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>