$(document).ready和$(document).on('pageinit')之间的区别

Question

我正在使用jquery mobile,我想重现这段代码:

$(document).ready(function () {
    $.mobile.loading('show');
});

它显示了微调器,直到我决定使用其他函数隐藏它

$.mobile.loading( 'hide' );

现在我看到document.ready()在jquery mobile 1.2中已被弃用,所以他们建议用它替换它 $(document).on('pageinit')

但如果我用建议的代码替换我的代码微调器自动隐藏......为什么？这是新代码:

 $(document).on('pageinit',function(){
     $.mobile.loading( 'show' );
 });

Answer 1

有关:

这篇文章也可以在我的博客HERE中找到.

解

首先,您需要了解jQM页面事件及其流程.

$(document).on('pageinit',function(){
    $.mobile.loading( 'show' );
});

确实取代了:

$(document).ready(function () {
    $.mobile.loading('show');
});

但是jQM页面包含几个阶段.在您的情况下,为了能够显示微调器,您需要使用pageshow事件.必须显示页面才能显示微调器.我为你创建了一个例子:http://jsfiddle.net/Gajotres/Nncem/.在其中转到下一页以查看微调器.您还可以使用pageinit替换pageshow以查看差异.

您应该使用此代码:

$(document).live('pageshow', function (e, data) {
    $.mobile.loading('show');
});  

但即使这不是正确的方法,最好的jQM方式是使用这种语法:

$('div[data-role="page"]').live('pageshow', function (e, data) {
    $.mobile.loading('show');
});    

或者,如果要将其绑定到单个页面,请使用以下命令:

$('#pageID').live('pageshow', function (e, data) {
    $.mobile.loading('show');
});  

其中pageID是您网页的ID.

$(document).on('pageinit')vs $(document).ready()

你在jQuery中学到的第一件事就是在$(document).ready()函数中调用代码,这样一旦加载了DOM就会执行所有操作.但是,在jQuery Mobile中,Ajax用于在导航时将每个页面的内容加载到DOM中.由于这个$(文档).ready()将在加载第一个页面之前触发,并且每个用于页面操作的代码将在页面刷新后执行.这可能是一个非常微妙的错误.在某些系统上,它似乎可以正常工作,但在其他系统上,它可能会导致不稳定,难以重复的怪异发生.

经典的jQuery语法:

$(document).ready() { 

});

为了解决这个问题(并且相信我这是一个问题),jQuery Mobile开发人员创建了页面事件.简而言之,事件是在特定页面执行中触发的事件.其中一个页面事件是一个pageinit事件,我们可以像这样使用它:

$(document).on('pageinit', function(){

});

我们可以更进一步,使用页面ID而不是文档选择器.假设我们有一个带有id 索引的 jQuery Mobile页面:

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
        <h3>
            First Page
        </h3>
        <a href="#second" class="ui-btn-right">Next</a>
    </div>

    <div data-role="content">
        <a href="#" data-role="button" id="test-button">Test button</a>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">

    </div>
</div>

要执行只能用于索引页面的代码,我们可以使用以下语法:

$('#index').on('pageinit', function(){

});

每次要加载页面并首次显示时,都会执行Pageinit事件.除非手动刷新页面或关闭ajax页面加载,否则它不会再次触发.如果您希望每次访问页面时都执行代码,最好使用pagebeforeshow事件.

这是一个工作示例:http://jsfiddle.net/Gajotres/Q3Usv/来演示此问题.

关于这个问题的几点注意事项.无论您是使用1个html多个页面还是多个html文件范例,建议将所有自定义javascript页面处理分成单个单独的js文件.这将使您的代码更好,但您将获得更好的代码概述,尤其是在创建jQuery Mobile应用程序时.

还有另一个特殊的jQuery Mobile事件,它被称为mobileinit.当jQuery Mobile启动时,它会触发文档对象上的mobileinit事件.要覆盖默认设置,请将它们绑定到mobileinit.mobileinit使用的一个很好的例子是关闭ajax页面加载或更改默认的ajax加载器行为.

$(document).on("mobileinit", function(){
  //apply overrides here
});

Answer 2

尝试

用于表演

$.mobile.showPageLoadingMsg();

用于隐藏

$.mobile.hidePageLoadingMsg();

如果动态附加内容，则必须隐藏微调器

检查这个