问题 jQuery Mobile委托vs live vs bind


我似乎无法理解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


3743
2018-05-09 16: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)。运用 .bind() 直接上了 document 元素与使用相同 .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


15
2018-05-09 16:23



谢谢你的资源。这很棒。我有另一个有点相关的问题。假设我的主页有幻灯片显示。我应该在'pageinit'或'pageshow'功能中调用幻灯片代码吗? - cusejuice
pageshow 将在用户看到页面的每个后续时间触发。例如,当您第一次查看主页时它会触发,但是当您离开然后返回主页时它也会触发。我会在幻灯片中设置幻灯片 pageinit 事件处理程序,但然后在其中停止它 pagehide 事件处理程序并在中启动它 pageshow 事件处理程序这将适用于初始加载,因为 pageshow 事件发生后 pageinit 事件。 - Jasper
如果我设置了幻灯片放映(即运行一个函数来初始化幻灯片放映) pageinit 和 pageshow 事件处理程序,它不会调用该函数两次? - cusejuice
我所说的是初始化幻灯片(不是启动它) pageinit,然后开始吧 pageshow 并阻止它 pagehide 所以它没有任何理由不使用CPU。我不知道你正在使用什么插件,但通常你可以初始化幻灯片而不自动启动它。 - Jasper
啊,我明白了。我在用着 Flexslider 马上。你能推荐一款专门用于移动设备的精彩幻灯片(即带触摸事件)吗? - cusejuice


答案:


您将绑定到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)。运用 .bind() 直接上了 document 元素与使用相同 .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


15
2018-05-09 16:23



谢谢你的资源。这很棒。我有另一个有点相关的问题。假设我的主页有幻灯片显示。我应该在'pageinit'或'pageshow'功能中调用幻灯片代码吗? - cusejuice
pageshow 将在用户看到页面的每个后续时间触发。例如,当您第一次查看主页时它会触发,但是当您离开然后返回主页时它也会触发。我会在幻灯片中设置幻灯片 pageinit 事件处理程序,但然后在其中停止它 pagehide 事件处理程序并在中启动它 pageshow 事件处理程序这将适用于初始加载,因为 pageshow 事件发生后 pageinit 事件。 - Jasper
如果我设置了幻灯片放映(即运行一个函数来初始化幻灯片放映) pageinit 和 pageshow 事件处理程序,它不会调用该函数两次? - cusejuice
我所说的是初始化幻灯片(不是启动它) pageinit,然后开始吧 pageshow 并阻止它 pagehide 所以它没有任何理由不使用CPU。我不知道你正在使用什么插件,但通常你可以初始化幻灯片而不自动启动它。 - Jasper
啊,我明白了。我在用着 Flexslider 马上。你能推荐一款专门用于移动设备的精彩幻灯片(即带触摸事件)吗? - cusejuice


这是一个很好的描述: http://jquerybyexample.blogspot.com/2010/08/bind-vs-live-vs-delegate-function.html

但简单的回答是,如果您使用的是jquery 1.7,您应该开始在()上使用新的API而不是以下任何一个: http://api.jquery.com/on/


0
2018-05-09 16:23



那篇文章实际上令人困惑。例如, .live() 不会绑定到您所定位的元素(永远),它会绑定到 document element(always)并检查目标元素的冒泡事件,以查看它是否与您传入的选择相匹配 .live()。也, .live() 可以用于链接,但作者使用一个愚蠢的例子来显示相反的情况。请不要将本文作为有关这些功能的信息的基础。 - Jasper
试试这篇文章,它更好: elijahmanor.com/2012/02/... - Jasper


前几天我有同样的问题,发现这篇文章对每一个都提供了明确的细分。

http://jquerybyexample.blogspot.com/2010/08/bind-vs-live-vs-delegate-function.html


0
2018-05-09 16:25



这篇文章充满了无效的陈述,请参阅我对Julie Sheffield的回答的评论。 - Jasper
试试这篇文章,它真的很棒: elijahmanor.com/2012/02/... - Jasper