0

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

http://jsfiddle.net/43nWM/

干杯

4

7 回答 7

2

你可以试试。

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

    $(function(){
      $('#cblist a').live('click', function(){
        $(this).parent('li').remove();
        return false;
      });
    });
于 2012-08-03T11:22:08.880 回答
0

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

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

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

于 2012-08-03T11:18:15.570 回答
0

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

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

到

  $('#cblist').on('click', 'a', function() {
于 2012-08-03T11:18:17.870 回答
0

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

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

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

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

于 2012-08-03T11:19:47.347 回答
0 
$(function(){
     $('#cblist').on('click','a',function(){
         $(this).parent('li').remove();
         return false;
     });
});

查看这个jsfiddle

于 2012-08-03T11:19:57.907 回答
0

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

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

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

于 2012-08-03T11:20:43.597 回答
0

您应该添加此代码以添加动态li标签

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

我还更新了 jsfiddle 上的代码

于 2012-08-03T11:23:53.137 回答