jQuery 绑定事件在通过 ajax 获取的元素上

Question

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

我现在正在做的是：

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

如何更好地将事件绑定到DOM中新插入的元素上？

- Admir Tuzović

Answer 1

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

这样做可以仅关联一次事件。

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

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

注意：这里的body可以被最近的静态父级替换，例如包含行的表格。我使用body进行委派，因为我不知道标记。

- Sushanth --

---

所以基本上你的意思是，如果我用一些 div 容器包装我的按钮，并在其上使用 "on"，通过指定它的子元素来触发事件，那么它将适用于添加到该容器中的所有未来子元素？ - Admir Tuzović

没错，而且你不需要将它绑定在一个新的 div 中。任何静态的父元素都可以。比如说，如果表格一开始就存在，你也可以使用它。 - Sushanth --

更具体地说：委托容器需要最初存在于HTML中，可以将ajax内容加载到其中。如果您通过ajax加载容器及其子元素，则无法正常工作。这是因为您在此处绑定事件到容器，而不是其中特定的动态添加和删除的项目。 - Kostia

Answer 2

使用on()，你可以将事件附加到动态元素上。你绑定到最近的静态元素（或文档），并将实际目标元素作为第二个参数指定。

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

理论上，您不需要off()，因为您的代码应该设计为仅执行一次连接代码。

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

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

演示具有以下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"));
});​

- Nope

Answer 3

我试图将dblclick事件绑定到已声明的表中添加的行，此操作是在从AJAX调用接收响应后进行的。我不必执行.appendTo($("#container"));。

您能否请解释一下为什么实际上需要这样做？

我的示例：

$(".divRightDiv table tbody").on("dblclick", ".thisRow", function () {
    //whatever I want to do
});

在 AJAX 成功后，我会这样做：

for (var i = 0; i < msg.d.length; i++) {
        if (oddEven == 'even') {
            oddEven = 'odd';
        }
        appendRows += "<tr class='" + oddEven + " thisRow'><td>" + msg.d[i].c_Id + "</td><td>" + msg.d[i].c_Name + "</td></tr>";"</td></tr>");
    }
    $(".tblTableName").append(appendRows);

- hackernewbie