我有一些代码,我循环遍历页面上的所有选择框并将.hover
事件绑定到它们,以便在mouse on/off
它们的宽度进行一些调整。
这发生在页面准备就绪并且工作得很好。
我遇到的问题是,我在初始循环后通过 Ajax 或 DOM 添加的任何选择框都没有绑定事件。
我找到了这个插件( jQuery Live Query Plugin ),但在我用插件添加另外 5k 到我的页面之前,我想知道是否有人知道这样做的方法,无论是直接使用 jQuery 还是通过其他选项。
从 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>
jQuery.fn.on
的文档中有一个很好的解释。
简而言之:
事件处理程序仅绑定到当前选定的元素; 它们必须存在于您的代码调用
.on()
。
因此,在以下示例中, #dataTable tbody tr
必须在生成代码之前存在。
$("#dataTable tbody tr").on("click", function(event){
console.log($(this).text());
});
如果将新 HTML 注入页面,则最好使用委托事件来附加事件处理程序,如下所述。
委托事件的优点是,它们可以处理来自稍后添加到文档的后代元素的事件。例如,如果表存在,但是使用代码动态添加行,则以下将处理它:
$("#dataTable tbody").on("click", "tr", function(event){
console.log($(this).text());
});
除了能够处理尚未创建的后代元素上的事件之外,委派事件的另一个优点是,当必须监视许多元素时,它们可能会有更低的开销。在其tbody
中包含 1,000 行的数据表中,第一个代码示例将处理程序附加到 1,000 个元素。
委托事件方法(第二个代码示例)将事件处理程序仅附加到一个元素tbody
,并且事件只需要向上tbody
一个级别(从单击的tr
到tbody
)。
注意:委派事件不适用于SVG 。
这是一个没有任何库或插件的纯 JavaScript解决方案:
document.addEventListener('click', function (e) {
if (hasClass(e.target, 'bu')) {
// .bu clicked
// Do your thing
} else if (hasClass(e.target, 'test')) {
// .test clicked
// Do your other thing
}
}, false);
hasClass
在哪里
function hasClass(elem, className) {
return elem.className.split(' ').indexOf(className) > -1;
}
归功于 Dave 和 Sime Vidas
使用更现代的 JS, hasClass
可以实现为:
function hasClass(elem, className) {
return elem.classList.contains(className);
}