众所周知,从 jQuery 1.7 开始:
$('someSelector').live('click', fn());
基本上变成了:
$(document).on('click', 'someSelector', fn());
所有实时事件并不直接绑定(bind)到选择器中的元素,而是绑定(bind)到文档的委托(delegate)。
我认为,这是因为将来匹配 'someSelector'
的元素不存在于 DOM 中,因此不能绑定(bind)事件处理程序(通过直接或委托(delegate)绑定(bind)).
对于绝大多数(如果不是所有)元素都是动态加载的单页应用程序,是否有关于如何通过将所有内容绑定(bind)到文档来最好地处理性能问题的已发布指南?
例如,涵盖了在通过 ajax()
加载新内容时注册/重新注册事件处理程序的最佳方式,以及如何更新在惰性 .live( )
心态?
最佳答案
我不确定是否有“已发布的指南”。
我认为这种方法有其优点:
找到不会从文档中删除的最近的逻辑共同祖先。
示例:对于可拖动表行行为,这将是父表(或 tbody)。
在那里绑定(bind)事件。这允许您让同一事物的不同实例表现不同,而无需进行上下文检查。
示例: 如果在您的一个表上暂时禁用行拖动,处理该事件的表自然会知道。
文档
不会。它会将
document
处理的事件数量保持在最低限度,因此在事件发生时不会有很多“这是否真的有必要”检查。示例:如果当前没有包含可拖动行的表,则甚至不需要在
document
级别触发事件处理程序(只是为了找出table.draggable tr
并不是事件的真正来源并立即将其关闭)。如果公共(public)祖先经常被删除,您可以决定是在事件处理程序创建时重新绑定(bind)它们,还是在层次结构中向上绑定(bind)它们会更好。
我会在创建容器时重新绑定(bind)容器事件,但我想这是个人偏好。毕竟重新绑定(bind)很容易:
// once, beforehand
var draggableTableRowBehavior = {
dragstart: function () { /* ... */ },
dragstop: function () { /* ... */ }
/* ... */
};
//in Ajax success:
$table.on(draggableTableRowBehavior, 'tr');
关于javascript - 单页应用程序从 .live() 升级到 .on(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10401453/