Question

我有一个具有相同字段集的多个实例的表单。您可以通过单击＆＃34;添加字段来添加更多字段集。＆＃34;

该页面以5个字段集开头。如果您点击＆＃34;删除，＆＃34;背景颜色将变为红色（这样您就可以知道哪个字段集将被删除）。

如果您添加更多字段，那么这些字段集将不会响应＆＃34;删除＆＃34;按钮即使它们具有与页面开始时完全相同的代码，也会将它们添加到同一表单中。

您能否请一看我的代码，让我知道为什么添加的字段不会删除而页面上的内容会删除？

// Adds a new field set to the form

$('[data-action="addField"]').click(function(){
        var fieldSet = '<fieldset><input type="text" name="field"><button type="button" data-action="removeField">Remove</button></fieldset>';
        $('form').append(fieldSet);
  return false;
});

// Changes the background to red instead of removing

$('[data-action="removeField"]').click(function(){
    $(this).parents('fieldset').css('background-color','red');
return false;
});

Answer 1

绑定事件不适用于动态添加/创建的元素，因此您需要将事件委托给不会动态操作的第一个父项（使用jQuery或JavaScript）

来自jQuery documentation：

// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );

您也可以阅读Event binding on dynamically created elements。

所以你应该改变你的代码：

// jQuery 1.7+
$('form').on('click', '[data-action="removeField"]', function() {
    $(this).parents('fieldset').css('background-color', 'red');
    return false;
});

Answer 2

更新的js小提琴就在这里 https://jsfiddle.net/Lc510xmn/2/

$(function(){

    $('[data-action="addField"]').click(function(){
            var fieldSet = '<fieldset><input type="text" name="field"><button type="button" data-action="removeField">Remove</button></fieldset>';
            $('form').append(fieldSet);
      return false;
    });

    $("#fields").on("click", '[data-action="removeField"]', function(event){
        $(this).parents('fieldset').css('background-color','red');
    return false;
    });

});

Answer 3

试试这个$(this).parents('fieldset').remove()

jQuery删除父字段集

3 个答案: