问$(Document)pageinit和$(document).on('pageinit')的区别

EN

相关信息：

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

解决方案

首先，您需要了解jQM页面事件及其流。

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

确实取代了：

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

但是jQM页面由几个阶段组成。在您的示例中，为了能够显示微调器，您需要使用pageshow事件。页面必须显示才能显示微调器。我已经为您创建了一个示例：http://jsfiddle.net/Gajotres/Nncem/。在其中转到下一页以查看微调器。您还可以用pageinit替换页面显示，以查看不同之处。

您应该使用以下代码：

$(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 中，Ajax用于在导航时将每个页面的内容加载到DOM中。因此，$(document).ready()将在加载第一个页面之前触发，而用于页面操作的所有代码都将在页面刷新后执行。这可能是一个非常微妙的bug。在一些系统上，它可能看起来运行良好，但在其他系统上，它可能会导致不稳定的、难以重复的怪异现象发生。

经典jQuery语法：

$(document).ready() { 

});

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

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

});

我们可以更进一步，使用页面id而不是文档选择器。假设我们有一个带有id 索引的jQuery移动页面

<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/来演示这个问题。

关于这个问题还有更多的注释。无论您使用的是1html、多页面还是多html文件范例，都建议将所有自定义javascript页面处理分离到一个单独的js文件中。这将使您的代码变得更好，但您将获得更好的代码概述，特别是在创建jQuery移动应用程序时。

还有另一个特殊的移动文档启动事件，称为mobileinit.When jQuery移动启动，它在文档对象上触发一个mobileinit事件。要覆盖默认设置，请将它们绑定到mobileinit。使用ajax mobileinit的一个很好的例子是关闭ajax页面加载，或者更改默认的ajax加载程序行为。

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

这个

$(document).on('pageinit')

方法是让jquery mobile在动态页面加载发生后触发。

$(document).ready()

不会表现得像

$(document).on('pageinit')

因为它只在页面加载时触发一次。

试一试

为了展示

$.mobile.showPageLoadingMsg();

用于隐藏

$.mobile.hidePageLoadingMsg();

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

check this one