jquery将事件绑定到新元素[重复]答案

【问题标题】：jquery bind event to new elements [duplicate]jquery将事件绑定到新元素[重复]
【发布时间】：2014-11-09 15:01:35
【问题描述】：

JAVA 脚本

$(document).ready(function() {
     $(".group").click(groupFile);

     function groupFile(){
        alert('clicked!');
     }
});
function insert()

{
    $("body").append("<div class='group' ></div>");
}

HTML

<div class='group' >
</div>

<input type="button" value="insertNewElement" id="insert" onclick="insert()"/>

当页面加载时，点击div.group 运行良好并触发groupFile 并提醒我。但是当插入新的div.group.onclick div.group 功能groupFile 不起作用？请帮帮我

【问题讨论】：

$("<div class='group' ></div>").click(groupFile).appendTo("body");
...但是您需要将 groupFile() 函数放在 .ready() 回调之外。

标签： javascript jquery events triggers event-handling

【解决方案1】：

您可以使用 jQuery on() 方法将事件委托给静态祖先，如下所示：

$(document).ready(function() {
 $(document).on("click",".group",groupFile);
 function groupFile(){
    alert('clicked!');
 }
});

阅读更多关于event delegation

【讨论】：

去掉$(document).ready() 部分。如果您要绑定到文档，则等待文档加载是没有意义的。这样即使页面没有完成加载，点击也会触发处理程序。如果您要使用这种级别的委派，不妨充分利用它。
@squint 这是一个很好的观点......但这会将处理程序函数留在全局范围内......我不知道这是否有区别，但目前它看起来像 OP想要ready() 内部的一些函数和外部的一些函数......不知道为什么，否则我会将命名处理程序更改为匿名函数...... :)
是的......这是真的。如果是这样的话，我可能会把它扔进 IIFE，但我想我们不知道那里还有什么。我敢打赌，OP 在没有太多组织的情况下到处乱扔代码，但我们不确定。

【解决方案2】：

对于动态元素，您需要绑定到 body 上的事件：

$("body").on("click", ".group", function(e){
    alert('clicked');
});

【讨论】：

您不需要“绑定”到正文。这只是一种选择。

【解决方案3】：

您应该将事件委托给BODY（或文档或“通常”更好地委托给最近的静态父元素）级别。使用.on()，传递selector 参数：

$('body').on('click', 'div.group', function(){
     //...
});

See explanation

【讨论】：

@Omar 哦，当然，谢谢你的提示！ :)