我有一些代码循环浏览页面上的所有选择框并将.hover事件绑定到它们以对它们的宽度进行一些调整mouse on/off。
这发生在页面准备就绪并且工作正常。
我遇到的问题是我在初始循环之后通过 Ajax 或 DOM 添加的任何选择框都不会绑定事件。
我找到了这个插件(jQuery Live Query Plugin),但是在我使用插件向我的页面添加另一个 5k 之前,我想看看是否有人知道这样做的方法,无论是直接使用 jQuery 还是通过其他选项。
从 jQuery 1.7 开始,您应该使用jQuery.fn.on已填充的选择器参数:
jQuery.fn.on
$(staticAncestors).on(eventName, dynamicChild, function() {});
解释:
这称为事件委托,其工作方式如下。staticAncestors该事件附加到应处理的元素的静态父 ( ) 上。每次在此元素或其中一个后代元素上触发事件时,都会触发此 jQuery 处理程序。然后,处理程序检查触发事件的元素是否与您的选择器 ( dynamicChild) 匹配。当匹配时,您的自定义处理程序函数将被执行。
staticAncestors
dynamicChild
在此之前,推荐的方法是使用live():
live()
$(selector).live( eventName, function(){} );
但是,live()在 1.7 中已弃用on(),而在 1.9 中完全删除。live()签名:
on()
…可以替换为以下on()签名:
$(document).on( eventName, selector, function(){} );
例如,如果您的页面正在使用类名动态创建元素,dosomething您会将事件绑定到已经存在的父级(这是这里问题的关键,您需要绑定到现有的东西,不要绑定到动态内容),这可以是(也是最简单的选择)是document. 尽管记住document可能不是最有效的选择。
dosomething
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>