ajax 检索元素上的 jQuery 绑定(bind)事件

Question

我有一个包含行的页面，每行都包含几个输入字段和一个执行某些操作的按钮。按钮具有 .super-button 类。假设我有 23 行，我刚刚通过 AJAX 检索了第 24 行并将其插入到下面，我想在单击事件上将一些功能绑定(bind)到它的按钮。

我现在正在做的是:

$(".super-button").off("click");
$(".super-button").on("click", function(){
    /// Do some awesome functionality
});

是否有更好的方法将事件绑定(bind)到 DOM 中新插入的元素？

Answer 1

您可以将事件委托(delegate)给静态的直接父级。

通过这样做，您只需关联一个事件一次..

$("body").on("click",".super-button", function(){
    /// Do some awesome functionality
});

这将确保您不需要在每次创建新元素时都使用 .on() 和 .off()。

注意:这里的 body 可以替换为最接近的静态父级，可能是其中存在行的表。我使用 body 委托(delegate)它，因为我不知道标记。