从 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
may not be the most efficient option .
$(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>