Question

当从较大的列表（user_checkboxes）中选择项目时，我希望能够将项目附加到无序列表（wibble）。如果用户点击“wibble”列表中的某个项目，我想从列表中删除该项目。

我遇到的问题是列表项'a'和'b'正如我所希望的那样工作。即如果我点击列表项，它们将从列表中删除。不幸的是，通过追加添加到列表中的任何项目的行为都不一样。即它们不会从列表中选择和删除。

<ul class = "wibble">
<li>a</li>
<li>b</li>  
</ul>


$(document).ready(function () { 
  $(".user_checkboxes").change(function() {
     if ($(this).attr("checked")) {             
        $('.wibble').append('<li>'+newListItem+'</li>');
     }
  }
  $('.wibble li').click(function() {
     $(this).remove();
  );
}

Answer 1

绑定click事件处理程序时，列表元素尚不存在，因此jQuery无法将任何处理程序绑定到它们。

改为使用.delegate() ^[docs]：

$('.wibble').delegate('li', 'click', function() {
    $(this).remove();
});

这会将事件处理程序绑定到.wibble（存在），并侦听源自后代li元素的任何点击。

Answer 2

你使用了实时

http://api.jquery.com/live/

或委托

http://api.jquery.com/delegate/

我不久前问了同样的问题

Trigger events not working on ajax loaded html

值得一提的是表现明智，如果不是那么大，虽然代表是要走的路。

Answer 3

基本上是因为在加载DOM之后添加了新的列表项，jQuery没有引用它们。这是对您的方法的简单修复：

$('.wibble li').live('click', function() { 
 $(this).remove();

）;

Answer 4

问题是，您在添加新元素之前设置了事件处理程序。

每次添加新元素时都可以再次添加事件处理程序，但幸运的是jQuery内置了一个函数，可以确保事件绑定到每个元素，即使它们稍后动态添加也是如此。

只需更改此行：

$('.wibble li').click(function() {

对此：

$('.wibble li').live('click',function() {

如何删除通过追加添加的列表项？

4 个答案: