jquery将事件绑定到新元素

Question

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不起作用？请帮我

Answer 1

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

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

阅读有关事件委派的更多信息

Answer 2

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

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

Answer 3

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

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

参见解释