jQuery Mobile委托vs live vs bind

时间:2012-05-09 16:15:26

标签: jquery jquery-mobile

我似乎无法理解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 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

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