如何从可排序列表中删除动态添加的项目？答案

【问题标题】：How to delete dynamically added item from sortable list?如何从可排序列表中删除动态添加的项目？
【发布时间】：2013-09-19 21:57:10
【问题描述】：

我创建了一个 jquery 可排序列表，其中每个项目的右侧都有一个“删除”按钮。当您单击删除按钮时，该项目将被删除。我从这里的另一个问题（Delete Jquery-ui sortable list item）中找到了这个。我需要允许用户将项目添加到列表中，所以我创建了一个添加按钮。添加工作正常，但是，无法使用删除按钮删除新添加的项目。这是 jfiddle：http://jsfiddle.net/g33ky/fadAn/1/

代码如下：

<script>
$("#fruitList").sortable();

$("#fruitList .delete").click(function () {
  $(this).parent().remove();
});

$("#addFruit").click(function () {
  $('#fruitList').append("<li class='fruit'>New fruit<button class='delete'>Delete</button></li>");
});
</script>

<html>
<button id='addFruit'>Add fruit</button>
<ul id="fruitList">
    <li class="fruit">Apple
        <button class="delete">Delete</button>
    </li>
    <li class="fruit">Banana
        <button class="delete">Delete</button>
    </li>
    <li class="fruit">Orange
        <button class="delete">Delete</button>
    </li>
</ul>
</html>

点击“添加水果”，然后尝试删除新水果，你会发现“新水果”上的删除不起作用。我已经用谷歌搜索并在这里搜索过，但到目前为止还没有运气。任何帮助将不胜感激。

【问题讨论】：

Jquery adding event listeners to dynamically added elements的可能重复

标签： jquery jquery-ui-sortable

【解决方案1】：

未定义动态添加元素的事件处理程序。

改用此代码

$("#fruitList").on('click', '.delete', function () {
    $(this).parent().remove(); 
});

它将动态添加点击处理程序

【讨论】：

【解决方案2】：

使用：

$("body").on('click', '#fruitList .delete', function () {
    $(this).closest( ".fruit" ).remove();
});

JSFiddle : http://jsfiddle.net/NhhKd/

【讨论】：

【解决方案3】：

这是一个非常简单的情况，您在您的 DOM 中有新的动态创建的元素...并且您希望它们具有与具有相同类的先前元素相同的行为...

只需将您的电话 ".click(function(){})" 更改为 ".live('click', function() {})"。

从 jQuery >= v1.7 开始，您可以（并且应该）使用.on()。 http://api.jquery.com/on/

叫做delegation，见http://www.sitepoint.com/event-delegation-with-jquery/

【讨论】：

【解决方案4】：

这是因为您使用 jQuery “click” 方法来运行处理程序。不幸的是，这个方法只绑定到现有的 DOM 元素，所以如果你添加任何新的

，或任何其他标签，它不会被那个“点击”处理程序所束缚。要解决这个问题，您需要使用 jQuery 的“on”函数，该函数绑定到存在或将在未来创建的任何内容。

文档在这里：http://api.jquery.com/on/

可能你的 JS 应该看起来像这样（如果有任何错误，很抱歉，但我现在没有地方可以测试它）

$( "#fruitList" ).on( "click", ".delete", function() {
    $(this).parent().remove();
});

$( "#fruitList" ).on( "click", "#addFruit", function() {
    $('#fruitList').append("<li class='fruit'>New fruit<button class='delete'>Delete</button></li>");
});

【讨论】：

感谢大家的帮助。非常感激。正如您可能已经猜到的那样，我在网络编程方面有点新手。再次感谢！！！