我有一个 jQuery 插件,它异步加载并在页面加载时将事件附加到 DOM 元素。
DOM 元素间歇性地没有附加来自插件的事件 - 这是由于通过另一个 javascript 文件加载这些 DOM 元素而发生的。
有没有办法确保事件处理程序始终附加到 DOM 元素?
我有一个 jQuery 插件,它异步加载并在页面加载时将事件附加到 DOM 元素。
DOM 元素间歇性地没有附加来自插件的事件 - 这是由于通过另一个 javascript 文件加载这些 DOM 元素而发生的。
有没有办法确保事件处理程序始终附加到 DOM 元素?
这里的主要答案是,如果您正在编写插件,则在页面加载时(或在任何其他时间)将其附加到正确的元素不是您的问题。那是你的插件的用户来做的。它不在您的问题域中。
但是,如果您想尝试处理它:
您可以使用 jQuery 处理程序确保页面完全加载,该ready
处理程序具有快捷方式(只需将函数传递给jQuery
),例如:
jQuery(function($) {
// ...here, all page elements defined by the main HTML have been created
});
如果您需要处理页面完全加载后添加的元素,请查看使用事件委托。当事件冒泡到它们时,您不是在元素本身上而是在它们的祖先元素上处理事件。例如,这将处理click
具有类的元素上的任何事件,foo
除非该事件被靠近该元素的处理程序取消:
$(document.body).delegate(".foo", "click", function() {
// An element matching ".foo" was clicked
});
什么delegate
是将事件挂在您调用它的元素上(document.body
在这种情况下),但只有在实际点击在从实际发生点击的元素到其父级的祖先路径中具有匹配元素时才触发处理程序,到它的父级,依此类推,直到你调用的元素delegate
。
使用最新版本的 jQuery,您还可以使用超重载on
函数来做同样的事情(注意 args 的顺序不同):
$(document.body).on("click", ".foo", function() {
// An element matching ".foo" was clicked
});
为了清楚起见,我更喜欢delegate
。
但同样,这真的不是你的问题。插件的用户知道何时何地连接它是由插件的用户决定的。