jQuery Mobile：文档就绪与页面事件

Question

我正在使用jQuery Mobile，我无法理解经典文档就绪和jQuery Mobile页面事件之间的差异。

>

真正的区别是什么？

为什么应该

<!-- language: lang-js -->

$(document).ready() {

});

比更好

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

});

当您从一个页面转换到另一个页面时，页面事件的顺序是什么？

如何将数据从一个页面发送到另一个页面，是否可以访问上一个页面的数据？

Answer 1

这是正确的方法：

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

$(document).on('pageinit', "#index",  function() {
    ...
});

Answer 2

你们中的一些人可能会发现这很有用。只需将其复制粘贴到您的页面，您就可以在Chrome控制台中获得触发事件的序列（CtrlShiftI）。

$(document).on('pagebeforecreate',function(){console.log('pagebeforecreate');});
$(document).on('pagecreate',function(){console.log('pagecreate');});
$(document).on('pageinit',function(){console.log('pageinit');});
$(document).on('pagebeforehide',function(){console.log('pagebeforehide');});
$(document).on('pagebeforeshow',function(){console.log('pagebeforeshow');});
$(document).on('pageremove',function(){console.log('pageremove');});
$(document).on('pageshow',function(){console.log('pageshow');});
$(document).on('pagehide',function(){console.log('pagehide');});
$(window).load(function () {console.log("window loaded");});
$(window).unload(function () {console.log("window unloaded");});
$(function () {console.log('document ready');});

您不会在控制台中看到卸载，因为卸载页面时（离开页面时）会触发卸载。使用方法如下：

$(window).unload(function () { debugger; console.log("window unloaded");});

你就会明白我的意思了。

Answer 3

我最初的文章是针对旧的页面处理方式，基本上是jQuery Mobile 1.4之前的所有内容。旧的处理方式现在已被弃用，它将在（包括）jQuery Mobile 1.5之前保持活动状态，因此您仍然可以使用下面提到的所有内容，至少直到明年和jQuery Mobile 1.6。

旧事件（包括pageinit）不再存在，它们被pagecontainer小部件替换。Pageinit被完全擦除，您可以改用pagecreate，该事件保持不变，不会更改。

如果您对页面事件处理的新方法感兴趣，请看这里，在任何其他情况下，请继续阅读本文。即使您使用的是jQuery Mobile 1.4，您也应该阅读这个答案，它超出了页面事件的范围，因此您可能会找到许多有用的信息。

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

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

经典jQuery语法：

$(document).ready(function() {

});

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

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

});

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

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

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

});

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

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

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

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

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

首先，可以在此处找到所有事件：http://api.jquerymobile.com/category/events/

假设我们有一个页面A和一个页面B，这是一个卸载/加载顺序：

>

第B页-创建前事件页

第B页-事件页面创建

第B页-事件pageinit

Page A-事件pagebefore隐藏

第A页-事件页面删除

第A页-事件页面隐藏

第B页-事件页面显示前

第B页-事件页面显示

要更好地理解页面事件，请阅读以下内容：

• 加载外部页面时，会触发加载前页面、加载页面和加载失败页面

页面加载JSFIDLE示例：http://jsfiddle.net/Gajotres/QGnft/

如果未启用AJAX，则某些事件可能不会触发。

如果由于某种原因需要在某些条件下阻止页面转换，可以使用以下代码完成：

$(document).on('pagebeforechange', function(e, data){
    var to = data.toPage,
        from = data.options.fromPage;

    if (typeof to  === 'string') {
        var u = $.mobile.path.parseUrl(to);
        to = u.hash || '#' + u.pathname.substring(1);
        if (from) from = '#' + from.attr('id');

        if (from === '#index' && to === '#second') {
            alert('Can not transition from #index to #second!');
            e.preventDefault();
            e.stopPropagation();

            // remove active status on a button, if transition was triggered with a button
            $.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active ui-focus ui-btn');;
        }
    }
});

这个例子在任何情况下都会起作用，因为它会在每次页面转换请求时触发，最重要的是它会在页面转换发生之前阻止页面更改。

这是一个工作示例：

jQuery Mobile的工作方式与经典Web应用程序不同。根据您每次访问某个页面时设法绑定事件的方式，它会一遍又一遍地绑定事件。这不是错误，这只是jQuery Mobile处理其页面的方式。例如，看看这个代码片段：

$(document).on('pagebeforeshow','#index' ,function(e,data){
    $(document).on('click', '#test-button',function(e) {
        alert('Button click');
    });
});

工作jsFiddle示例：http://jsfiddle.net/Gajotres/CCfL4/

每次访问页面#索引单击事件都将绑定到按钮#测试按钮。通过从第1页移动到第2页并返回几次来测试它。有几种方法可以防止此问题：

最好的解决方案是使用pageinit绑定事件。如果您查看官方留档，您会发现pageinit只会触发一次，就像文档就绪一样，因此不会再次绑定事件。这是最好的解决方案，因为您没有像使用off方法删除事件时那样的处理开销。

正在使用的JSFIDLE示例：http://jsfiddle.net/Gajotres/AAFH8/

此工作解决方案是在前面一个有问题的示例的基础上制定的。

在绑定事件之前删除它：

$(document).on('pagebeforeshow', '#index', function(){
    $(document).off('click', '#test-button').on('click', '#test-button',function(e) {
        alert('Button click');
    });
});

正在使用的JSFIDLE示例：http://jsfiddle.net/Gajotres/K8YmG/

使用jQuery过滤器选择器，如下所示：

$('#carousel div:Event(!click)').each(function(){
    //If click is not bind to #carousel div do something
});

因为事件过滤器不是官方jQuery框架的一部分，所以可以在这里找到：http://www.codenothing.com/archives/2009/event-filter/

简而言之，如果速度是您最关心的问题，那么解决方案2比解决方案1要好得多。

一个新的，可能是其中最简单的一个。

$(document).on('pagebeforeshow', '#index', function(){
    $(document).on('click', '#test-button',function(e) {
        if(e.handled !== true) // This will prevent event triggering more than once
        {
            alert('Clicked');
            e.handled = true;
        }
    });
});

正在使用的JSFIDLE示例：http://jsfiddle.net/Gajotres/Yerv9/

对于此解决方案，Tnx发送给sholsinger：http://sholsinger.com/archive/2011/08/prevent-jquery-live-handlers-from-firing-multiple-times/

pageChange事件怪癖-触发两次

有时pagechange事件会触发两次，与前面提到的问题无关。

pagebeforechange事件发生两次的原因是，当toPage不是jQuery增强的DOM对象时，在changePage中进行递归调用。这种递归是危险的，因为允许开发人员在事件中更改toPage。如果开发人员在pagebeforechange事件处理程序中始终将toPage设置为字符串，无论它是否是对象，都将导致无限递归循环。pageload事件将新页面作为数据对象的页面属性传递（这应该添加到文档中，当前未列出）。因此，可以使用pageload事件访问加载的页面。

简而言之，这是因为您正在通过pageChange发送其他参数。

例子：

<a data-role="button" data-icon="arrow-r" data-iconpos="right" href="#care-plan-view?id=9e273f31-2672-47fd-9baa-6c35f093a800&amp;name=Sat"><h3>Sat</h3></a>

要解决此问题，请使用页面事件转换顺序中列出的任何页面事件。

如前所述，当您从一个jQuery Mobile页面更改到另一个jQuery Mobile页面时，通常是通过单击指向DOM中已经存在的另一个jQuery Mobile页面的链接，或者通过手动调用$.mobile.changePage，会发生几个事件和后续操作。在高级别会发生以下操作：

• 页面更改过程开始
• 将加载新页面
• 该页面的内容为“增强型”（样式化）
• 发生从现有页面到新页面的转换（幻灯片/弹出窗口等）

这是一个平均的页面转换基准：

页面加载和处理：3 ms

页面增强：45毫秒

过渡：604 ms

总时间：670 ms

*这些值以毫秒为单位。

因此，正如您所看到的，转换事件占用了几乎90%的执行时间。

在页面转换期间，可以将参数从一个页面发送到另一个页面。有几种方法可以做到这一点。

参考：https://stackoverflow.com/a/13932240/1848600

解决方案1：

您可以使用ChangePage传递值：

$.mobile.changePage('page2.html', { dataUrl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true });

然后这样读：

$(document).on('pagebeforeshow', "#index", function (event, data) {
    var parameters = $(this).data("url").split("?")[1];;
    parameter = parameters.replace("parameter=","");
    alert(parameter);
});

指数html

<!DOCTYPE html>
  <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>
    </title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script>
        $(document).on('pagebeforeshow', "#index",function () {
            $(document).on('click', "#changePage",function () {
                $.mobile.changePage('second.html', { dataUrl : "second.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : false, changeHash : true });
            });
        });

        $(document).on('pagebeforeshow', "#second",function () {
            var parameters = $(this).data("url").split("?")[1];;
            parameter = parameters.replace("parameter=","");
            alert(parameter);
        });
    </script>
   </head>
   <body>
    <!-- Home -->
    <div data-role="page" id="index">
        <div data-role="header">
            <h3>
                First Page
            </h3>
        </div>
        <div data-role="content">
          <a data-role="button" id="changePage">Test</a>
        </div> <!--content-->
    </div><!--page-->

  </body>
</html>