jquery - ワンクリックでJquery削除ボタンが機能しなくなる

Question

ユーザーがフィールドを動的に追加できるフォームがあります。最初のフィールド以降のすべてのフィールドには、「削除」ボタンが追加されています。
以下はドキュメントにあります。

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

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

});

Answer 2

ボタンのコピーを追加する必要があります。

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