javascript - 单页应用程序从 .live() 升级到 .on()

Question

众所周知，从 jQuery 1.7 开始:

$('someSelector').live('click', fn());

基本上变成了:

$(document).on('click', 'someSelector', fn());

所有实时事件并不直接绑定(bind)到选择器中的元素，而是绑定(bind)到文档的委托(delegate)。

我认为，这是因为将来匹配 'someSelector' 的元素不存在于 DOM 中，因此不能绑定(bind)事件处理程序(通过直接或委托(delegate)绑定(bind)).

对于绝大多数(如果不是所有)元素都是动态加载的单页应用程序，是否有关于如何通过将所有内容绑定(bind)到文档来最好地处理性能问题的已发布指南？

例如，涵盖了在通过 ajax() 加载新内容时注册/重新注册事件处理程序的最佳方式，以及如何更新在惰性 .live( ) 心态？

Answer 1

我不确定是否有“已发布的指南”。

我认为这种方法有其优点:

• 找到不会从文档中删除的最近的逻辑共同祖先。

  示例:对于可拖动表行行为，这将是父表(或 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');