从单个页面应用程序的.live()升级到.on()

Question

众所周知,自jQuery 1.7:

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

已成为,基本上:

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

所有实时事件都不直接绑定到选择器中的元素,但委托绑定到文档.

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

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

例如,覆盖通过加载新内容ajax()以及如何更新以懒惰.live()思维模式编写的代码来注册/重新注册事件处理程序的最佳方法？

Answer 1

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

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

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

  示例：对于可拖动的表行行为，这将是父表（或 tbody）。

• 在那里绑定事件。这允许您让同一事物的不同实例表现不同，而无需进行上下文检查。

  示例：如果在其中一张表上暂时禁用行拖动，处理该事件的表自然会知道。不会document。

• 它将把处理的事件数量保持document在最低限度，因此当事件发生时不会有很多“这真的有必要”检查。

  示例：如果当前没有包含可拖动行的表，则甚至不需要在该级别触发事件处理程序document（只需找出这table.draggable tr不是真正的事件源并立即将其关闭）。

• 如果公共祖先经常被删除，您可以决定是在创建事件处理程序时重新绑定事件处理程序，还是将它们绑定到层次结构中的更高级别会更好。

我会在创建容器时重新绑定容器事件，但我认为这是个人偏好。毕竟，重新绑定很容易：

// once, beforehand
var draggableTableRowBehavior = {
  dragstart: function () { /* ... */ },
  dragstop: function () { /* ... */ }
  /* ... */
};

//in Ajax success:
$table.on(draggableTableRowBehavior, 'tr');