对 .live 与 jQuery 一起工作的方式感到困惑答案

【问题标题】：Confused about the way .live works with jQuery对 .live 与 jQuery 一起工作的方式感到困惑
【发布时间】：2012-05-09 23:27:14
【问题描述】：

我有以下代码，但文档内没有准备好？

$('a[href^="content/"]').live('click', function(event)
{
    event.preventDefault();
    ....

此代码位于结束正文标记的上方。

如果我的 HTML 正文包含带有匹配 href 的地址链接，那么即使在执行此代码时它们还没有在 DOM 中，它们是否也会获得点击？我对 .live 的工作方式有点困惑。我认为通常你不会在实际元素上使用 .live ，而是在将来要填充元素的包含块上使用。

【问题讨论】：

标签： jquery

【解决方案1】：

我认为通常情况下您不会在实际元素上使用 .live ，而是在将来要填充元素的包含块上使用。

这就是代表所做的。然而，现场活动非常相似——它们只是将文档本身用作“包含块”。这样做的缺点是 jQuery 必须检查页面上发生的给定类型的 all 事件。因此，如果可能，您应该始终使用委托（通常是可能的！）

然而，从 jQuery 1.7 开始，各种事件注册方法被统一到 .on() 中，它根据参数注册常规事件和委托。对于现场活动，您只需在 document 上创建一个代表即可。

以下是一些关于注册直播/代表事件的旧/新方法的示例（我将省略常规方法，因为它们与 .bind() 相同，但使用新函数名称 .on()）：

// live events
$('.foo').live('click', function(e) {}); // old
$(document).on('click', '.foo', function(e) {}); // new

// delegates
$('#container').delegate('.foo', 'click', function(e) {}); // old
$('#container').on('click', '.foo', function(e) {}); // new

【讨论】：

事实上live() 使用document 作为委托也是它如此缓慢的原因，您应该在最近的静态父元素上使用delegate（或jQuery 1.7+ 中的on）可能。

【解决方案2】：

live 方法的语法有点混乱，使用起来也很棘手。这就是为什么它被更灵活的delegate 方法所取代，最近也被合并到on 方法中。

你的代码相当于：

$(document).delegate('a[href^="content/"]', 'click', function(event) { ...

所以，事件确实与文档元素挂钩。

您在包含块中描述的内容与live 方法无关。它总是将事件连接到文档元素。您使用delegate 或on 方法将事件连接到包含元素。

【讨论】：