3

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

我现在正在做的是：

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

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

4

3 回答 3

9

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

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

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

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

注意：这里的 body 可以被最近的静态父级替换，也许是一个存在行的表。我使用 body 委派它，因为我不知道 , 标记。

于 2012-10-09T20:56:37.057 回答
5

使用on()您可以将事件附加到动态元素。您绑定到最近的静态元素（或文档），将实际预期的目标元素指定为辅助参数。

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

从理论上讲，您不需要off()，因为您的代码应设计为仅执行连线代码。

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

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

演示具有以下 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"));
});​
于 2012-10-09T20:59:18.147 回答
0

在收到来自 AJAX 调用的响应后，我试图将dblclick事件绑定到添加到已声明表中的行。我不必这样做.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);
于 2013-12-17T08:06:25.477 回答