从 jQuery 1.7 开始你应该使用jQuery.fn.on填充选择器参数:
$(staticAncestors).on(eventName, dynamicChild, function() {});
解释:
这称为事件委托,其工作原理如下。该事件附加到静态父级(staticAncestors
)应处理的元素。每次在此元素或后代元素之一上触发事件时,都会触发此 jQuery 处理程序。然后处理程序检查触发事件的元素是否与您的选择器匹配(dynamicChild
)。当存在匹配时,就会执行您的自定义处理程序函数。
在此之前,推荐的方法是使用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>