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支持动态事件绑定方法，该方法会自动将处理程序绑定到新节点：

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

这应该将点击事件绑定到创建新ul的{{1}}，同时还绑定li下所有li的事件处理程序，无论他们是否是否动态创建。

您可以在jQuery API documentation中了解有关ul方法的更多信息。

.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;
}

Answer 2

虽然Brendan的回答是有效的，但我建议摆脱第二个功能并改用以下方法：

＆＃13;

body {
    margin: 0;
}
.table {
    display: table;
}

＆＃13;

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

＆＃13;

ul {
    border: 1px solid red;
}

li {
    border: 1px solid black;
}

＆＃13;

Answer 3

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

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>

尝试动态添加元素到<ul>标记

3 个答案: