livequery是否已被弃用

15

我正在查看旧代码。我发现对于使用ajax添加的元素,有很多livequery代码。新版本的jQuery是否不再需要livequery?有人知道具体是哪个版本后不再需要吗?

$("#somediv").livequery(function(){
    $(this).click(function(){

    });
});

4
是的,LiveQuery已经过时了。它也是一种反模式。 - Raynos
2
@Raynos 有什么可以替代它的吗?到目前为止,我还没有找到任何能够达到它目的的例子。.on是用于事件的,而唯一接近的jQuery事件是DOMNodeInserted,但它并不被广泛支持。 - AaronLS
1
@AaronLS 事件委托可以解决你的问题。如果你需要使用 DOMNodeInserted,那么你要么正在构建一个复杂的模板系统,要么你做错了。如果是前者,那么只需构建一个简单的模板系统即可。 - Raynos
4
@Raynos 哇,真的吗?你刚才做了一系列无效的假设。我曾见过很多有效使用livequery的例子,而且还没有看到保持关注点分离的替代方法。确实存在初始化场景,特别是在单页应用程序中处理动态内容时,这些场景不与特定事件相关,因此事件委派将无法解决问题。如果你认为有其他方法,请提供一个例子。我之前也遇到过“你做错了”的情况,你忽略了任何可行的解决方案,因为你的目的是打压别人。 - AaronLS
@AaronLS 给我一个livequery的使用案例。我会给你一个更好的选择。 - Raynos
4
这里是一个使用场景 - 用户脚本。我无法控制将元素插入页面的代码,但我希望我的脚本能够知道何时插入了这些元素。我尚未看到其他实现此目的的方法。 - Nathan Osman
2个回答

15

livequery 是与 .live() 完全不同的概念。

.live() 方法使用 事件委托 处理发生在页面上任何地方的事件。

livequery 会在 DOM 改变时 (通过 jQuery 方法) 调用处理程序。

对于下面的示例,当添加具有 class="some_class" 的元素到 DOM (或将该类添加到元素) 时,第一个处理程序将运行。 当移除时,运行第二个处理程序。

$('.some_class').livequery( function() {

       // apply a plugin to the element
    $(this).somePlugin();

}, function() {

    // clean up after the element was removed

});

实际上很少需要使用livequery,但在那种罕见的情况下,如果您需要响应DOM变化,并且无法控制引起这些变化的jQuery代码,则可以使用它。


@Raynos:我不想说它丑陋,但我几乎总是建议采用不同的方法。 - user113716
它每隔一段时间迭代DOM以查找更改。基本上,它轮询DOM,检查每个元素并查看是否有任何更改。这非常消耗计算资源,而且很愚蠢,它甚至没有为DOM变异事件进行特性检测。 - Raynos
9
@Raynos:我刚刚查看了源代码并进行了快速测试,你对livequery工作原理的描述是不正确的。它确实使用一个函数包装jQuery方法,在调用原始方法之前调用内部代码。因此,当调用方法时,它会根据提供的原始选择器执行DOM选择,并在发现新元素时应用回调函数。因此,并没有在每个时间段内轮询所有DOM元素。 - user113716
2
livequery 在以下两种情况下非常方便:1)当您需要在元素创建时对其执行某些操作(例如在已创建的元素上运行插件),或者2)当我需要立即在元素上进行绑定,并且不想依赖委托(也许其他更高级别的事件处理程序将在它到达我的处理程序之前停止委托)。虽然 1)可以通过手动管理代码来解决,但使用 livequery 更简单。但是,在旧浏览器上可能会有性能问题,因此请谨慎使用。 - Yehosef

6
你需要使用on()方法,将事件绑定到父元素或body上。例如:
$('#obj').livequery('click', function() { ... });
$('#obj').livequery(function() { ... });

成为
$('body').on('click', '#obj', function() { ... });
$('body').on('DOMNodeInserted','#obj', function() { ... });

请注意,DOMNodeInserted仅适用于IE9及以上版本。

1
我可以确认它在FF 59上运行。非常感谢这个提示! - thanassis

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接