javascript - 将点击事件绑定到动态创建的 html 内容

Question

当动态创建特定元素时，我有以下 jQuery 命令来绑定单击事件。

$(".bill-remove-icon").live("click", function(){
$(this).parent().hide('slide',function(){$(this).parent().remove()});
});

但是这段代码给出了一个萤火虫错误：

TypeError: $(...).live is not a function

我在这里做错了什么？如果此代码错误，请建议将事件绑定到动态创建的元素的更好方法。

score 3 · Accepted Answer

Live 已弃用，您必须使用以下委托.on()：

$(document).on("click", ".bill-remove-icon", function(){
    $(this).parent().hide('slide',function(){$(this).parent().remove()});
});

score 1 · Accepted Answer

live()在 jQuery 1.7 中已弃用，并在 1.9 中删除。您需要使用.on()，它的工作方式与之前略有不同live()。您不能将事件处理程序附加到动态注入的元素，您必须将其附加到页面加载时存在的元素，并将事件委托给动态添加的元素，如下所示：

$(document).on('click', '.bill-remove-icon', function() {
   ...
});

您应该更改document为更接近的bill-remove-icon内容，这样事件就不会在 DOM 树上冒泡。

score 0 · Accepted Answer

不要使用live它已被弃用。利用on

$(".bill-remove-icon").on("click", function(){
    $(this).parent().hide('slide',function(){$(this).parent().remove()});
});

3 回答 3