2

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

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

4

4 回答 4

5

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

改用此代码

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

它将动态添加clickhandler

于 2013-09-19T22:04:42.663 回答
2

利用 ：

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

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

于 2013-09-19T22:03:35.060 回答
1

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

只需将您的呼叫更改".click(function(){})"为".live('click', function() {})".

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

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

于 2013-09-19T22:03:24.427 回答
0

这是因为您使用 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>");
});
    • 于 2013-09-19T22:09:06.967 回答