Question

嘿我正在尝试制作一个包含可添加和可移动字段的表单页面。 “添加字段”按钮工作正常，但“删除字段”将无法正常工作。有谁知道为什么？

HTML

<div id="email">
<div>Primary Email:
<input type="text" name="email" length="40" />
</div>
</div>
<a href="#" onclick="return false;" id="addField">Add New Field</a>

JQuery的

$(document).ready(function () {
var i = 1;
$("#addField").click(function () {
var targetDiv = $(this).prev('div');
$('<div>Pretend this is a text box <a href="#" id="rem" >Remove Field</a></div>').appendTo(targetDiv);
i++;
});

$('#rem').click(function () {
$(this).closest('div').remove();
});

});

谢谢！

Answer 1

注意：ID应该是唯一的，因此不要使用rem作为ID而是将其用作类

所以改变

$('<div>Pretend this is a text box <a href="#" id="rem" >Remove Field</a></div>').appendTo(targetDiv);

到

$('<div>Pretend this is a text box <a href="#" class="rem" >Remove Field</a></div>').appendTo(targetDiv);

然后，由于您正在使用动态添加的控件，因此请使用带有.on（）

的事件委派模型

$(document).on('click','.rem', function () {
    $(this).closest('div').remove();
});

演示：Fiddle

在表单上添加/删除字段

1 个答案: