为什么我不能删除新的jQuery创建的li？

我想创建一个实用jQuery格式化的用户界面列表。用户添加到带有输入字段和添加按钮的列表中，并且可以使用可排序功能对列表进行排序，并且应该能够双击以从列表中移除项目。但是，双击删除仅适用于我在html中输入的原始ol li项目。我在jQuery中添加的li对象由于某种原因没有被双击删除。有谁知道为什么？为什么我不能删除新的jQuery创建的li？

代码摘录下面

$(document).ready(function() { 
    $('ol').sortable(); 
    $('#button').click(function() { 
     var toAdd = $('input[name=checkListItem]').val(); 
     $('.list').append('<li>' + toAdd + '</div>'); 
    }); 
    $("li").dblclick(function() { 
     $(this).remove(); 
    }); 
    $(document).on('.dblclick', 'li', function() { 
     $(this).remove(); 
    }); 
});

来源

2013-03-27 Kylie Moden

OMG是代码/缩进风格难以阅读。 *编辑：看起来像有人决定改变它。* – 2013-03-27 19:15:41

好了，有两个问题（如下解决，用活生生的例子）：

此代码：

$("li").dblclick(function() { 
    $(this).remove(); 
});

...只会在运行时存在的元素上挂接dblclick事件。所以它不会把它连接到你以后添加的元素上。

此代码：

$(document).on('.dblclick', 'li', function() { 
    $(this).remove(); 
});

... 尝试通过事件委托处理它，但你不应该有对.dblclick领先.。

所以（使用一个比较正常的代码/缩进风格）：

$(document).ready(function() { 
    $('ol').sortable(); 

    $('#button').click(function() { 
     var toAdd = $('input[name=checkListItem]').val(); 

     $('.list').append('<li>' + toAdd + '</div>'); 
    }); 

    $(document).on('dblclick', 'li', function() { 
     $(this).remove(); 
    }); 
});

Live Example | Source

我在那里做的是删除我上面提到的第一个项目，因为它不适用于动态添加的元素，并修复第二项（删除.）。

来源

2013-03-27 19:17:40

$(".list").on('dblclick', 'li',function() { 
    $(this).remove(); 
});

来源

2013-03-27 19:16:23 shaun5

为什么我不能删除新的jQuery创建的li？

回答

相关问题