ajax检索到的元素上的jQuery绑定事件

Question

我有一个包含行的页面,每个行包含很少的输入字段和一个执行某些操作的按钮.Button有类.super-button.假设我有23行,我刚刚通过AJAX检索到第24行并将其插入下面,我想在点击事件中将某些功能绑定到它的按钮上.

我现在正在做的是:

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

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

Answer 1

您可以将事件委派给静态的直接父级.

通过这样做,您可以只关联一次事件..

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

这将确保你不需要使用.对()和.off()创建一个新的元素,每一次.

注意:这里的主体可以被最近的静态父代替,也许是存在行的表.我使用body委托它,因为我不知道标记.

Answer 2

使用on()可以将事件附加到动态元素.绑定到最接近的静态元素(或文档),指定实际的目标元素作为辅助参数.

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

理论上你不需要,off()因为你的代码应该只设计为执行连线代码.

您使用on()委托版本执行事件附加,然后任何与指定选择器匹配的未来元素将按预期附加事件.

DEMO - 将事件附加到动态添加的元素

DEMO具有以下HTML:

<button id="addElement" type="button">Add a dynamic element</button>

<div id="container">
    <div class="someElement">Some Element - click me<div>
</div>

和脚本:

$("#container").on("click", ".someElement", function(){
    alert("I have been clicked");
});

$("#addElement").on("click", function() {
    $('<div class="someElement">Another Element - click me too<div>').appendTo($("#container"));
});?