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
});

这将确保您每次创建新元素时都不需要使用 .on（）和 .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"));
});

Answer 3

我在尝试将dblclick事件绑定到我从已声明的表中添加的行后，接收到来自AJAX调用的响应。我没有必要.appendTo($("#container"));。

你能不能理解实际需要的原因？

我的样本：

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

在AJAX Success中，我这样做：

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);

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

3 个答案:

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