无法使用 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 为 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();
});

像这样省略选择器参数会创建一个直接绑定事件 - 仅元素调用 on 时与 .deleteDog 选择器匹配的内容将被连接。

应用选择器（就像在我的原始代码中一样）使其成为委托事件，jQuery 将侦听所有点击，如果它们源自具有 deleteDog 类的元素，则函数将会触发。