jQuery一旦添加就无法删除li答案

【问题标题】：jQuery Cant remove li once addedjQuery一旦添加就无法删除li
【发布时间】：2012-08-01 10:29:50
【问题描述】：

当我将新的<li> 添加到列表中，然后尝试将其删除时，它不会让我从列表中删除新添加的功能？

http://jsfiddle.net/43nWM/

干杯

【问题讨论】：

与您的问题无关，但请注意，我使用的是 Chrome，所以我可以告诉您：Uncaught TypeError: Object [object Object] has no method 'sortable'

标签： javascript jquery list add

【解决方案1】：

你可以试试。

http://jsfiddle.net/43nWM/1/

    $(function(){
      $('#cblist a').live('click', function(){
        $(this).parent('li').remove();
        return false;
      });
    });

【讨论】：

不应该使用直播功能
.live() 方法已被弃用，您可以在 jQuery 文档中看到

【解决方案2】：

因为当浏览器正在读取您的 javascript 代码时，动态添加的 li 不在 DOM 中，因此无法找到它。而是将处理程序添加到父级，并像这样监听 a：

$('#cblist').on('click', 'a', function(){
    $(this).parent('li').remove();
    return false;
});

小提琴： http://jsfiddle.net/43nWM/3/

【讨论】：

有没有办法让链接显示“全部删除”，然后出现警报，您确定吗？是/取消。然后让它删除左侧列表中的所有li？

【解决方案3】：

您仅将点击事件绑定到当前的“删除”链接，而不是未来的链接。为此使用事件委托，以涵盖这两个基础。变化：

  $('#cblist a').click(function(){

到

  $('#cblist').on('click', 'a', function() {

【讨论】：

【解决方案4】：

这里的秘密是事件委托。当您调用.click(function() {...}) 或.on('click', function() {...}) 时，该事件处理程序仅分配给匹配选择器的元素当代码运行时。它不会影响以后添加的元素。

但是，您可以使用事件委托将事件处理程序分配给将包含所有动态元素的静态元素，只要匹配动态选择器的元素触发该类型的事件，该处理程序就会运行回调函数：

$('#cblist').on('click', 'a', function() {
    $(this).parent('li').remove();
    return false;
});

请查看.on() 函数文档中标题为直接和委托事件的部分以了解更多信息。

【讨论】：

【解决方案5】：

$(function(){
     $('#cblist').on('click','a',function(){
         $(this).parent('li').remove();
         return false;
     });
});

查看此jsfiddle

【讨论】：

让 javascript 监听每次点击，然后在整个 DOM 中搜索“#cblist a”并不是一个好主意。但是，它会起作用的。

【解决方案6】：

您应该将此代码添加到动态li标签上

$li = $('<li>'+name+'</li>');
$a = $('<a href="">remove</a>');
        $a.click(function(){
          $(this).parent('li').remove();
          return false;      
        });
$li.append($a);

我还更新了 jsfiddle 上的代码

【讨论】：

【解决方案7】：

另一种选择是使用 on() 函数，如下所示：http://jsfiddle.net/43nWM/12/

说实话，我其实更喜欢这里的其他两种解决方案。

编辑：使用 on() 代替。我最初建议使用 live()

【讨论】：

.live() 函数已经被弃用了个月，所以没有人应该编写使用它的新代码。
live 函数不应该被使用.. 因为它已被弃用并且它的性能不好
@ParvSharma 实际上，在 jQuery 1.7+ 中调用 $('selector').live('event', function() {...}) 将调用 $(document).on('event', 'selector', function() {...})。不使用已弃用函数的主要原因是理论上它们可以从未来版本中删除，从而破坏您的代码。
@AnthonyGrist - 是的，我知道