在JavaScript中如何动态创建元素的事件绑定？

从jQuery 1.7开始，你应该使用jQuery.fn.on：

$(staticAncestors).on(eventName, dynamicChild, function() {});

在此之前，推荐的方法是使用live()：

$(selector).live( eventName, function(){} );

但是，live()在1.7中赞成使用on()，并在1.9中完全删除。该live()签名：

$(selector).live( eventName, function(){} );

...可以用以下on()签名替换：

$(document).on( eventName, selector, function(){} );

例如，如果您的页面是动态创建具有类名的元素，dosomething您可以将事件绑定到已存在的父级（这是问题的核心，您需要存在要绑定的内容，不要绑定到动态内容），这可以是（也是最简单的选择）document。虽然记住document可能不是最有效的选择。

$(document).on('mouseover mouseout', '.dosomething', function(){
    // what you want to happen when mouseover and mouseout
    // occurs on elements that match '.dosomething'
});

绑定事件时存在的任何父级都可以。例如

$('.buttons').on('click', 'button', function(){
    // do something here
});

适用于

<div class="buttons">
    <!-- <button>s that are generated dynamically and added here -->
</div>