在 DOM 准备好后删除元素

Question

我有一些用户可以填写的字段（例如，姓名、号码、地址），然后他们可以单击“添加”，这会创建一个 div，显示他们刚刚输入的信息，并带有“删除”按钮（a href) 为每个条目。我遇到的问题是，一旦 DOM 准备好，删除按钮就不起作用。我已经硬编码了一个删除按钮，它删除了第 3 个 div（第 3 个是任意的），它可以工作，但不是在页面加载后生成的那些。我的问题是如何在 DOM 准备好后让删除按钮工作？

这里是remove函数（传入了id，所以它知道要删除哪个div）：

function remove(id) {
    $("div.reviewSub"+id).remove();
}

这是调用函数的处理程序：

$(".remove").click(function(event) {remove(event.target.id);});

检索后显示数据的方式是.append():

$(".reviewSub"+num).append("<a href=\"#\" class=\"remove\" id=\"" + num + "\">Remove</a>");

Answer 1

您可以在 jQuery 中使用live 方法。

$('.remove').live('click', function(event){
    remove(event.target.id); 
});

我怀疑您在附加 DOM 之前有代码 $(".remove").click(function(event) {remove(event.target.id);});。结果，由于该元素尚不存在，jQuery 无法将 click 事件绑定到该元素。

更多文档在这里http://api.jquery.com/live/