jQuery Mobile中的delegate、live和bind的区别

11

我似乎无法理解jQuery Mobile中以下内容之间的区别:

$( document ).live('pageshow', function(event) {
});

$( document ).bind('pageshow', function(event) {
});

$( document ).delegate("#page", "pageshow", function() {
});

如何在文档头部执行不同于某些页面的脚本?我应该使用哪些方法来调用这些脚本?

更新: jQuery版本:1.7.1 jQuery Mobile版本:1.1.0

3个回答

15

你需要绑定到jQuery Mobile暴露的“页面事件”,比如pageinit

$(document).delegate('#my-page', 'pageinit', function () {
    //this is like document.ready for this pseudo-page
});

由于您使用的是 jQuery Core 1.7.1,因此可以使用.on(),其语法略有不同:

$(document).on('pageinit', '#my-page', function () {
    //this is like document.ready for this pseudo-page
});

你的三种方法都实现了类似的功能。使用 .live() 和将 .delegate()document 作为根选择器一起使用是一样的,但是已被弃用,因此停止使用它是个好主意(来源:http://api.jquery.com/on)。直接在 document 元素上使用 .bind() 与使用 .delegate() 相同,但是当你使用 .bind() 时,你需要在事件处理程序中确定哪个伪页上的事件被触发,而不是在函数调用中确定。

例如:

$(document).bind('pageshow', function () {
    var id = $.mobile.activePage[0].id;
    //you can use $.mobile.activePage to do work on the current page
});

通常情况下,当我们不知道元素何时存在于DOM中时,会使用事件委托。这依赖于事件在DOM中向上冒泡直到它们到达根选择器(在你的情况下,它始终是document元素)。

.delegate()的文档:http://api.jquery.com/delegate

有关这些函数之间的区别的更一般信息,请参见此文章(我已阅读并核实了其准确性):http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html


谢谢提供资源,非常好。我还有一个相关的问题。假设我的主页有一个幻灯片,我应该在“pageinit”或“pageshow”函数中调用幻灯片代码? - cusejuice
1
每次用户看到页面时,pageshow 事件都会触发。例如,当您首次查看主页时,它将被触发,但当您导航离开并返回主页时也会触发。我会在 pageinit 事件处理程序中设置幻灯片展示,然后在 pagehide 事件处理程序中停止它,并在 pageshow 事件处理程序中重新开始它。这对于初始加载有效,因为 pageshow 事件在 pageinit 事件之后触发。 - Jasper
如果我在pageinitpageshow事件处理程序中都设置幻灯片(即运行函数以初始化幻灯片),那么它不会调用两次函数吗? - cusejuice
我所说的是在pageinit中初始化幻灯片(而不是启动它),然后在pageshow中启动它,在pagehide中停止它,这样就不会无缘无故地使用CPU。我不知道你正在使用哪个插件,但通常可以初始化幻灯片而不自动启动它。 - Jasper
啊,我明白了。我现在正在使用Flexslider。你可以推荐一些适用于移动端(即具有触摸事件)的优秀幻灯片插件吗? - cusejuice
显示剩余2条评论

0

那篇文章实际上很令人困惑。例如,.live() 不会绑定到你所针对的元素(从来没有),它会绑定到 document 元素(总是),并检查目标元素的冒泡事件,以查看它是否与你传递给 .live() 的选择器匹配。此外,.live() 可以在链接中使用,但作者使用了一个愚蠢的例子来展示相反的情况。请不要将这篇文章作为你关于这些函数信息的基础。 - Jasper
1
试试这篇文章,它更好:http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html - Jasper

0

这篇文章充满了无效的陈述,可以看看我对Julie Sheffield回答的评论。 - Jasper
试试这篇文章,真的很好:http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html - Jasper

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