0

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

http://jsfiddle.net/ZNbm8/

我的 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 创建了一个与之关联的按钮，该按钮应该允许用户删除新创建的条目。我不知道为什么这不起作用。我一直在寻找解决方案，但到目前为止没有任何效果。

4

6 回答 6

4

它不起作用，因为您将单击处理程序附加到尚不存在的元素。

如果您通过使用委托稍微改变您的点击处理程序，您应该没问题：

HTML：

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

JS：

$(".parentElement").on("click", ".remove", function(){
    $(this).remove();
});
于 2013-02-27T22:38:46.030 回答
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 问题！

于 2013-02-27T22:40:34.110 回答
1

您需要使用的委托版本on才能正常工作

小提琴：

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

http://jsfiddle.net/DpDYq/

于 2013-02-27T22:40:58.147 回答
0

添加动态元素时，如果您希望您的 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/

编辑

如评论中提到的，live()在 jquery 的更高版本（1.7+）中已弃用。改为这样做：

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();
});

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

于 2013-02-27T22:39:55.960 回答
0

对于那个用途

$('.remove').live('click', function(event)
于 2013-02-27T22:40:47.787 回答
0

根据 jQuery 的文档：

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。

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

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

正如你在这里看到的：http: //jsfiddle.net/darkajax/JWFgS/

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

于 2013-02-27T22:40:54.847 回答