1

这是JSfiddle

这是我的代码。

HTML

<h2>Todo List</h2>
<div id='additem'>
    <input type='text' name='additem'/>
    <button>Add Item</button>
</div>
<div id='todolist'>
    <ol>
    </ol>
   <!-- Add item from "additem" input field -->
</div>

JS

$(document).ready(function(){
    $('button').click(function(){
        var item = $('input[name=additem]').val();
        $('ol').append('<li>'+ item +' <button id="remove">Remove</button></li>');
    });
    $("#remove").click(function(){
       $(this).parent('li').remove();
    });

   });
4

5 回答 5

4

您需要使用on()来使用事件委托动态添加元素。您可以将事件委托给使用 on 绑定事件时可用的父元素，或者您可以使用document其他方式。

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

委托事件

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。该元素可以是模型-视图-控制器设计中视图的容器元素，参考

于 2013-05-08T18:51:07.870 回答
1

当您动态创建删除按钮时 - 您需要像这样委托点击事件

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

http://jsfiddle.net/mohammadAdil/rfK5a/6/

http://api.jquery.com/on/

于 2013-05-08T18:52:17.233 回答
1

您可以在容器上添加实时事件：

$('#todolist').on('click', 'button', function(){
  $(this).closest('li').remove();
});

查看更新的小提琴：http: //jsfiddle.net/tkirda/rfK5a/4/

于 2013-05-08T18:53:36.473 回答
1

那么这里是http://jsfiddle.net/rfK5a/7/

您将需要以下代码

$(document).ready(function(){
    $('button').click(function(){
        var item = $('input[name=additem]').val();
        $('ol').append('<li>'+ item +' <button class="remove">Remove</button></li>');
    });
    $("#todolist").on("click",".remove",function(){
       $(this).parent('li').remove();
    });

   });

我建议使用remove class而不是删除 id，因为您将拥有多个删除按钮。理想情况下，我们不应该有多个具有一个 id 的元素。

于 2013-05-08T19:01:07.507 回答
1

由于 live() 自 jQuery 1.9 以来已被删除，并且您在 jsfiddle 中使用 jQuery 2.0，所以简单的答案是使用on()正如其他人指出的那样。 http://jquery.com/upgrade-guide/1.9/#live-removed

我还会将 id 更改为“删除”按钮上的一个类，因为其中可能有很多。还将 parent() 更改为最接近的() ，因此如果您的标记略有更改，您的代码仍然可以工作。

http://jsfiddle.net/rfK5a/10/

$(document).ready(function(){
  $('button').click(function(){
    var item = $('input[name=additem]').val();
    $('ol').append('<li>'+ item +' <button class="remove-btn">Remove</button></li>');
  });
  $('#todolist').on('click', '.remove-btn', function(e) {
    $(this).closest('li').remove();
  });
});
于 2013-05-08T19:09:08.510 回答