Question

我创建了一个jquery可排序列表，其中每个项目右侧都有一个“删除”按钮。单击删除按钮时，该项目将被删除。我在这里找到了另一个问题（Delete Jquery-ui sortable list item）。我需要允许用户将项添加到列表中，因此我创建了一个Add按钮。添加工作正常，但是，使用删除按钮无法删除新添加的项目。这是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>

单击“添加水果”，然后尝试删除新水果，您将看到“新水果”上的删除不起作用。我在这里用Google搜索并搜索，但到目前为止还没有运气。任何帮助将不胜感激。

Answer 1

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

使用此代码

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

它将动态添加clickhandler

Answer 2

使用：

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

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

Answer 3

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

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

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

它被称为委托，请参阅http://www.sitepoint.com/event-delegation-with-jquery/

Answer 4

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

或任何其他标记，它将不会对该“click”处理程序产生影响。要解决此问题，您需要使用jQuery的“on”函数，该函数将绑定到将来存在或将要创建的anytinhg。

文档在这里：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>");
});

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

4 个答案: