我正在使用jQuery让用户动态添加和删除表单字段,但它无法正常工作。
删除第一个字段(在HTML标记中硬编码)时,它完全正常,但它不会让我删除任何动态添加的字段。
这是我的jQuery代码:
$("#addDog").click(function(event)
{
event.preventDefault();
var doglist = <?php echo "'" . $javadogs . "'"; ?>;
var newdog = '<div><select name="resDog[]" class="select">' + doglist + '</select><input type="text" class="shortinput" name="resResult[]" size="20" value="" /><a href="#" class="deleteDog"><img src="/admin/images/delete.png" alt="Remove dog" /></a></div>';
$(this).parent().before(newdog);
});
$(".deleteDog").click(function(event)
{
event.preventDefault();
$(this).parent().remove();
});
我尝试使用jQuery的.on()
函数,但这也不起作用。
答案 0 :(得分:6)
以下是您要使用on
$(document).on("click", ".deleteDog", function(e) {
e.preventDefault();
$(this).parent().remove();
});
理想情况下,所有这些deleteDog
按钮都将放置在某种容器中。如果所有这些按钮都位于ID为foo
的div中,您可以更有效地设置如下事件:
$("#foo").on("click", ".deleteDog", function(e) {
e.preventDefault();
$(this).parent().remove();
});
现在,不是每次点击正在检查的文档中的任何位置,而是只有那些冒泡到#foo
的点击次数。
我猜你最初试图像这样使用on
:
$(".deleteDog").on("click", function(e) {
e.preventDefault();
$(this).parent().remove();
});
这在功能上与说:
相同$(".deleteDog").bind("click", function(e) {
e.preventDefault();
$(this).parent().remove();
});
省略这样的选择器参数会创建一个直接绑定事件 - 只会调用与.deleteDog
选择器匹配的元素on
。
在原始代码中应用类似选择器 - 使其成为委托事件-jQuery将侦听所有点击,如果它们来自具有类deleteDog
的元素,则功能会起火。