我有一个表单,其中包含同一字段集的多个实例。您可以通过单击“添加字段”来添加更多字段集。
页面以 5 个字段集开始。如果您单击“删除”,背景颜色将变为红色(以便您可以知道将删除哪个字段集)。
如果您添加更多字段,这些字段集将不会响应“删除”按钮,即使它们具有与页面开始时完全相同的代码,并且它们被添加到同一表单中。
您能否看一下我的代码并告诉我为什么添加的字段不会删除,而页面上开始的字段会删除?
https://jsfiddle.net/Lc510xmn/1/
// 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;
});
最佳答案
绑定(bind)事件不适用于动态添加/创建的元素,因此您需要将事件委托(delegate)给不会动态操作的第一个父元素(使用 jQuery
或 JavaScript
)。
// 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;
});
关于javascript - jQuery 删除父字段集,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39397957/