相关：

此文章也可以作为我的博客的一部分 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中。因为这个 $（document）.ready（）将在加载第一个页面之前触发，并且每个用于页面操作的代码将在页面刷新后执行。这可能是一个非常微妙的错误。在某些系统上，它似乎可以正常工作，但在其他系统上可能会导致不稳定，难以重复的怪异。

经典jQuery语法：

$(document).ready() { 

});

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

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

});

我们可以更进一步，使用页面ID而不是文档选择器。假设我们有jQuery Mobile页面，其id为 index ：

<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 < / strong>文档对象上的事件。要覆盖默认设置，请将其绑定到 mobileinit 。 mobileinit 用法的一个很好的例子是关闭ajax页面加载或更改默认的ajax加载程序行为。

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

Answer 2

$(document).on('pageinit')

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

$(document).ready()

不会表现得像

$(document).on('pageinit')

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

Answer 3

尝试

for show

$.mobile.showPageLoadingMsg();

for hide

$.mobile.hidePageLoadingMsg();

如果动态附加内容

，则必须隐藏微调器

check this one

Answer 4

发生动态页面加载时不使用

pageinit。事实并非如此。原因是因为document.ready（）只会被调用一次。这意味着如果您有多个页面在准备就绪时要执行某些操作，则无法执行此操作。

因此，document.ready（）只能工作一次，但只要页面初始化，pageinit就可以工作。

$（document）.ready和$（document）.on（'pageinit'）之间的区别

4 个答案:

相关：

解决方案

$（document）.on（'pageinit'）vs $（document）.ready（）