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

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

我现在正在做的是:

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

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

最佳答案

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

通过这样做，您可以将一个事件关联一次。

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

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

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

关于ajax 检索元素上的 jQuery 绑定(bind)事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12808287/