无法使用jQuery删除动态添加的内容

Question

我正在使用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()功能,但这也不起作用.

Answer 1

这是您想要使用的方式 on

$(document).on("click", ".deleteDog", function(e) {
    e.preventDefault();
    $(this).parent().remove();
});

理想情况下,所有这些deleteDog按钮都将放置在某种容器中.如果所有这些按钮都在id为div的div中foo,您可以更有效地设置如下事件:

$("#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,该功能将闪光.