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

Difference between $(document).ready and $(document).on('pageinit')

提问by user1903894

I'm using jquery mobile and I'd like to reproduce this code:

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

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

it shows the spinner until I decide to hide it using in other functions

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

$.mobile.loading( 'hide' );

Now I see that document.ready() is deprecated in jquery mobile 1.2, so they suggest to replace it with $(document).on('pageinit')

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

But If I replace my code with the suggested one the spinner autohide... why? This is the new code:

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

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

回答by Gajotres

Related:

有关的：

This article can also be found as a part of my blog HERE.

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

Solution

解决方案

First off all you need to understand jQM page events and their flow .

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

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

is indeed a replacement for:

确实可以替代：

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

but jQM page consists from few phases. In your case, to be able to show a spinner you need to use pageshow event. Page must be shown to be able to show spinner. I have created an example for you: http://jsfiddle.net/Gajotres/Nncem/. In it go to next page to see a spinner. You can also replace pageshow with pageinit to see a difference.

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

You should use this code:

您应该使用此代码：

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

But even this is not a correct way, best jQM way is to use this syntax:

但即使这不是正确的方法，最好的 jQM 方法是使用以下语法：

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

Or if you want to bind it to a single page use this:

或者，如果您想将其绑定到单个页面，请使用以下命令：

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

Where pageID is an ID of your page.

其中 pageID 是您页面的 ID。

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

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

The first thing you learn in jQueryis to call code inside the $(document).ready()function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate. Because of this $(document).ready()will trigger before your first page is loaded and every code intended for page manipulation will be executed after a page refresh. This can be a very subtle bug. On some systems it may appear that it works fine, but on others it may cause erratic, difficult to repeat weirdness to occur.

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

Classic jQuery syntax:

经典的 jQuery 语法：

$(document).ready() { 

});

To solve this problem (and trust me this is a problem) jQuery Mobiledevelopers created page events. In a nutshell page events are events triggered in a particular point of page execution. One of those page events is a pageinitevent and we can use it like this:

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

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

});

We can go even further and use a page id instead of document selector. Lets say we have jQuery Mobile page with an id index:

我们可以更进一步，使用页面 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>

To execute a code that will only available to the index page we could use this syntax:

要执行仅对索引页可用的代码，我们可以使用以下语法：

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

});

Pageinitevent will be executed every time page is about be be loaded and shown for the first time. It will not trigger again unless page is manually refreshed or ajax page loading is turned off. In case you want code to execute every time you visit a page it is better to use pagebeforeshowevent.

每次页面即将被加载和第一次显示时，都会执行Pageinit事件。除非手动刷新页面或关闭ajax页面加载，否则不会再次触发。如果您希望每次访问页面时都执行代码，最好使用pagebeforeshow事件。

Here's a working example : http://jsfiddle.net/Gajotres/Q3Usv/to demonstrate this problem.

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

Few more notes on this question. No matter if you are using 1 html multiple pages or multiple html files paradigm it is advised to separate all of your custom javascript page handling into a single separate js file. This will note make your code any better but you will have much better code overview, especially while creating a jQuery Mobileapplication.

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

There's also another special jQuery Mobileevent and it is called mobileinit.When jQuery Mobilestarts, it triggers a mobileinitevent on the document object. To override default settings, bind them to mobileinit. One of a good examples of mobileinitusage is turning off ajax page loading, or changing default ajax loader behavior.

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

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

回答by Licson

The

这

$(document).on('pageinit')

method is for jquery mobile to trigger after a dynamically page load occurs.

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

$(document).ready()

won't behave like

不会表现得像

$(document).on('pageinit')

because it only trigger once when the page loads.

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

回答by Miz

pageinit is not used when a dynamic page load occurs. That is not the case. The reason is because document.ready() will only get called once. This means if you have multiple pages where you want to do something when it is ready, you can't do so.

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

So, document.ready() will work one time only, but pageinit will work any time a page is initialized.

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

回答by Rohan Patil

Try

尝试

for show

作秀

$.mobile.showPageLoadingMsg();

for hide

为了隐藏

$.mobile.hidePageLoadingMsg();

you must hide the spinner if you dynamically appending the content

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

check this one

检查这个