13

我正在使用 jquery mobile，我想重现此代码：

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

它会显示微调器，直到我决定在其他功能中使用它来隐藏它

$.mobile.loading( 'hide' );

现在我看到在 jquery mobile 1.2 中已弃用 document.ready()，因此他们建议将其替换为$(document).on('pageinit')

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

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

4 回答 4

11

有关的：

这篇文章也可以作为我博客的一部分在这里找到。

解决方案

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

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

确实可以替代：

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

但是 jQM 页面由几个阶段组成。在您的情况下，为了能够显示微调器，您需要使用 pageshow 事件。必须显示页面才能显示微调器。我为您创建了一个示例：http: //jsfiddle.net/Gajotres/Nncem/。在其中转到下一页以查看微调器。您还可以将 pageshow 替换为 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') 与 $(document).ready()

在jQuery中学习的第一件事是调用$(document).ready()函数中的代码，以便在加载 DOM 后立即执行所有内容。但是，在jQuery Mobile中，Ajax 用于在您导航时将每个页面的内容加载到 DOM 中。因为这个$(document).ready()将在您的第一页加载之前触发，并且用于页面操作的每个代码都将在页面刷新后执行。这可能是一个非常微妙的错误。在某些系统上，它可能看起来工作正常，但在其他系统上，它可能会导致出现不稳定、难以重复的怪异现象。

经典的 jQuery 语法：

$(document).ready() { 

});

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

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

});

我们可以更进一步，使用页面 id 代替文档选择器。假设我们有一个带有 id index的 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
});
于 2012-12-14T16:20:58.890 回答
3

这

$(document).on('pageinit')

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

$(document).ready()

不会表现得像

$(document).on('pageinit')

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

于 2012-12-14T12:12:32.770 回答
1

发生动态页面加载时不使用 pageinit。事实并非如此。原因是因为 document.ready() 只会被调用一次。这意味着，如果您有多个页面想要在它准备好时执行某项操作，则您无法执行此操作。

因此，document.ready() 只会工作一次，但 pageinit 将在任何时候初始化页面时工作。

于 2012-12-14T15:35:55.097 回答
1

尝试

作秀

$.mobile.showPageLoadingMsg();

隐藏

$.mobile.hidePageLoadingMsg();

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

检查这个

于 2012-12-14T11:53:16.147 回答