5

众所周知，从 jQuery 1.7 开始： 

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

基本上变成了： 

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

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

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

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

例如，在通过加载新内容时注册/重新注册事件处理程序的最佳方式ajax()以及如何更新以惰性.live()思维方式编写的代码？

4

1 回答 1

3

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

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

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

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

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

    示例：如果在您的一个表上临时禁用行拖动，则处理该事件的表自然会知道。document不会 。

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

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

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

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

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

//in Ajax success:
$table.on(draggableTableRowBehavior, 'tr');
于 2012-05-01T17:36:57.100 回答