我想添加和删除新的输入字段。默认情况下,我在HTML中准备了两个字段,当我想通过脚本删除它们时,它可以工作。但是当我添加新输入时,它不起作用。
<form action="test.php" method="post" name="days">
<div class="input-row">
<label>
1. item: <input name="item1" />
</label>
<br />
</div>
<div class="input-row">
<label>
2. item: <input name="item2" /><span class="delete"> - Delete</span>
</label>
<br />
</div>
<div class="input-row">
<label>
3. item: <input name="item3" /><span class="delete"> - Delete</span>
</label>
<br />
</div>
<p class="add-new-row">+ Add new field</p>
</form>
<script>
jQuery(document).ready(function() {
$('p.add-new-row').click(function() {
var n = $('input').length+1;
$('<div class="input-row"><label>'
+ n
+ '. item: <input name="item'
+ n
+ '"></input><span class="delete"> - Delete</span></label><br /></div>').appendTo('form[name="days"]').insertBefore('p.add-new-row');
return false;
});
$('.delete').on("click", function() {
$(this).closest('.input-row').remove();
return false;
});
});
</script>
答案 0 :(得分:2)
您需要做的就是改变这一点:
$('.delete').on("click", function() {
$(this).closest('.input-row').remove();
return false;
});
到此:
$(document).on("click", ".delete", function() {
$(this).closest('.input-row').remove();
return false;
});
JSFiddle:http://jsfiddle.net/epaT9/
当您开始添加新元素时,DOM已经加载,因此您必须引用该文档。