Question

好的，所以我一直坚持这个问题，我不知道为什么它不起作用。我创建了一个关于我的程序通常尝试做什么的方法：

我的jQuery是：

var count = 0;
$("#add").on("click", function(){
    var html = '<div id="stuff">';
    count++;
    html += '<button class="remove" id="' + count + '">Remove</button>';
    html += '</div>';
    $( html ).insertBefore("#add");
});
$(".remove").on("click", function(){
    $(this).remove();
});

我的html是：

<button id="add">Add</button>

基本上我有一个创建一些html的按钮。这个新的html创建了一个与之关联的按钮，允许用户删除新创建的条目。我不知道为什么这不起作用。我一直在寻找解决方案，但到目前为止还没有任何工作。

Answer 1

它无效，因为您将点击处理程序附加到尚不存在的元素。

如果您使用委托略微更改了单击处理程序，那么您应该没问题：

HTML：

<div class="parentElement">
  <button id="add">Add</button>
</div>

JS：

$(".parentElement").on("click", ".remove", function(){
    $(this).remove();
});

Answer 2

当您在#add之前插入内容时，只需抓住它的父级并添加一个委托事件处理程序on()即可删除#stuff元素，如下所示：

var count = 0;
$("#add").on("click", function(){
    count++;
    var html = '<div id="stuff_' + count + '">';
        html += '<button class="remove" id="a' + count + '">Remove</button>';
        html += '</div>';
    $( html ).insertBefore("#add");
}).parent().on('click', '.remove', function(){
    $(this).closest('[id^="stuff_"]').remove();
});

编辑：修正了ID问题！

Answer 3

您需要使用on的委托版本才能实现此目的

小提琴：

$(document).on("click", ".remove",function(){
    $(this).remove();
});

http://jsfiddle.net/DpDYq/

Answer 4

添加动态元素时，如果您希望javacsript影响这些元素，则需要使用.live

var count = 0;
$("#add").live("click", function(){
    var html = '<div id="stuff">';
    count++;
    html += '<button class="remove" id="' + count + '">Remove</button>';
    html += '</div>';
    $( html ).insertBefore("#add");
});
$(".remove").live("click", function(){
    $(this).remove();
});

http://jsfiddle.net/ZNbm8/3/

修改

AS在评论中提到，在{jquery（1.7+）的更高版本中不推荐使用live()。这样做：

var count = 0; $('body').on('click', '#add', function(){ var html = '<div id="stuff">'; count++; html += '<button class="remove" id="' + count + '">Remove</button>'; html += '</div>'; $( html ).insertBefore("#add"); }); $('body').on('click', '.remove', function(){ $(this).remove(); });

上面将处理程序附加到所有DOM元素，其中“remove”类或id“add”是“body”中DOM元素的后代，即使它们将来被添加。

Answer 5

用于该用途

$('.remove').live('click', function(event)

Answer 6

根据jQuery的文档：

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）来附上事件处理程序。

所以你也可以使用.on()：

这样做

$("body").on("click", ".remove", function(){
    $(this).remove();
});

正如您在此处所见：http://jsfiddle.net/darkajax/JWFgS/

注意：您可以更改父元素的body ...

jQuery：无法删除动态创建的内容

6 个答案: