1

我有一个允许用户动态添加字段的表单。第一个字段之后的每个字段都添加了一个“删除”按钮。
以下是在文档中.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”。但是，这只适用于一次。奇怪的是，如果我让按钮执行其他操作，例如更改字段组背景颜色，它一直有效。

4

2 回答 2

2

您必须附加按钮的副本。

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

于 2013-07-06T17:54:11.573 回答
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));

});
于 2013-07-06T18:19:48.017 回答