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

Question

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

13

我正在使用jQuery移动框架，希望能够重现以下代码：

$(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' );
 });

- user1903894

看一下这个问题及其被接受的答案：https://dev59.com/FGsz5IYBdhLWcg3w9swQ 当你将事件绑定到实际页面而不是文档时，它似乎可以工作。 - Alejo

4个回答

3

The

$(document).on('pageinit')

该方法是为了在动态加载页面发生后，jquery mobile可以触发。

$(document).ready()

不会像这样表现

$(document).on('pageinit')

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

- Licson

好的，但为什么在http://jquerymobile.com/test/docs/api/events.html上说如果行为不同，请使用document.on('pageinit')替换document.ready？ - user1903894

这是因为它最符合jQuery Mobile的行为，而且每次通过jQuery Mobile加载页面时都会触发它。 - Licson

请检查我回答中添加的链接。 - Rohan Patil

当然我已经检查过了。Jquery mobile使用ajax来加载页面，每次使用ajax加载页面时都会触发它，但是文档从未刷新，因此$(document).ready()只会触发一次。这与我们期望的方式不同，因此建议使用$(document).on('pageinit')。 - Licson

所以，我想解决我的问题，即在我决定停止之前继续显示旋转器（使用点击或其他事件），而不使用document.ready... - user1903894

1

尝试

用于展示

$.mobile.showPageLoadingMsg();

隐藏

$.mobile.hidePageLoadingMsg();

如果您动态添加内容，则必须隐藏旋转器

查看此链接

- Rohan Patil

1

$.mobile.showPageLoadingMsg(); 和 $.mobile.hidePageLoadingMsg(); 在 jQuery Mobile 1.2 中已被弃用。我想只使用未被弃用的代码。 - user1903894

@user1903894 请问具体问题是什么，您想隐藏“spinner”还是它自动隐藏了？ - Rohan Patil

请检查我回答中添加的链接。 - Rohan Patil

我想在页面加载时显示旋转器，而不隐藏它，直到我执行某个操作（点击或其他）。您的链接与我之前在其中一个答案中发布的链接相同。 - user1903894

1

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

因此，document.ready()仅适用于一次性操作，而pageinit则适用于任何页面初始化的情况。

- Miz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gajotres · Accepted Answer

$(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/，用于演示此问题。

关于这个问题还有几点需要注意。无论您使用单个html多个页面还是多个html文件的范例，建议将所有自定义javascript页面处理分离到一个单独的js文件中。这不会使您的代码更好，但您将拥有更好的代码概述，特别是在创建jQuery Mobile应用程序时。

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

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

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

相关：

解决方案

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