Question

JAVA SCRIPT

$(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!');
 }
});

详细了解event delegation

Answer 2

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

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

See explanation

Answer 3

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

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

jquery将事件绑定到新元素

3 个答案: