Question

我有一个允许用户动态添加字段的表单。第一个字段后面的每个字段都添加了一个“删除”按钮以下是在document.ready

中

var new_button =$('<div class="form-actions"><button type="button" class="btn btn-primary remove pull-right">Remove</button></div>').click(function(){
    $(this).parents('.field_group').remove();
    });

然后，我按照这个

创建按钮，将其添加到新的字段组中

$('#more_fields').click(function(){
    $('.field_group:first').clone(true).insertAfter('.field_group:last');
        var last = $('.field_group:last');
        last.append(new_button);
 );

我的目标是在每次点击按钮时删除围绕按钮的整个“.field_group”。但是，这仅适用一次。奇怪的是，如果我有按钮做其他事情，比如更改字段组背景颜色，它一直有效。

Answer 1

您必须附加按钮的副本。

last.append(new_button.clone(true));

Answer 2

对于不涉及HTML加载的更模块化方法，您可以将new_button更改为以下内容：

var new_button = $("<div/>", {
    "class": "form-actions"
}).append($("<button/>", {
    "class": "btn btn-primary remove pull-right",
    "text": "Remove"
})).on("click", "button", function () {
     $(this).parents('.field_group').remove();
});

正如Darhazer所说，你必须使用clone(true)。

$('#more_fields').click(function(){
    $('.field_group:first').clone(true).insertAfter('.field_group:last');
        var last = $('.field_group:last');
        last.append(new_button.clone(true));

});

单击后，Jquery删除按钮停止工作

2 个答案: