jQuery Mobile 1.4 更新：

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

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

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

较旧的内容：

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

$(document).on('pageinit') 对比 $(document).ready()

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

经典的 jQuery 语法：

$(document).ready(function() {

});

为了解决这个问题（相信我这是一个问题），jQuery Mobile开发人员创建了页面事件。简而言之，页面事件是在页面执行的特定点触发的事件。其中一个页面事件是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 Mobile应用程序时。

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

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

页面事件转换顺序

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

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

1. 页面 B - 事件页面beforecreate

2. 页面 B - 事件页面创建

3. 页面 B - 事件pageinit

4. page A - 事件pagebeforehide

5. page A - 事件pageremove

6. 页面 A - 事件页面隐藏

7. 页面 B - 活动页面beforeshow

8. 页面 B - 活动页面展示

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

• pagebeforeload,pageload并pageloadfailed在加载外部页面时触发
• pagebeforechange，pagechange并pagechangefailed在页面更改事件。当用户在应用程序的页面之间导航时会触发这些事件。
• pagebeforeshow，pagebeforehide，pageshow和pagehide是页面转换事件。这些事件在转换之前、期间和之后被触发并被命名。
• pagebeforecreate，pagecreate并且pageinit是页面初始化。
• pageremove 当页面从 DOM 中移除时可以被触发然后处理

页面加载jsFiddle示例：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/

每次访问页面时，#index点击事件都将绑定到按钮#test-button。通过从第 1 页移动到第 2 页并返回几次来测试它。有几种方法可以防止这个问题：

方案一

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

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

这个可行的解决方案是在之前的一个有问题的例子的基础上制定的。

解决方案2

在绑定之前删除事件：

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

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

解决方案3

使用 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 好得多。

解决方案4

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

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

工作 jsFiddle 示例：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。如果开发人员始终将 toPage 设置为字符串，则在 pagebeforechange 事件处理程序中，无论它是否是对象，都会导致无限递归循环。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 页面切换到另一个页面时，通常是通过单击指向 DOM 中已存在的另一个 jQuery Mobile 页面的链接，或者通过手动调用 $.mobile.changePage，将发生多个事件和后续操作。在较高级别会发生以下操作：

• 开始换页过程
• 加载了一个新页面
• 该页面的内容已“增强”（样式化）
• 发生从现有页面到新页面的转换（幻灯片/弹出/等）

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

页面加载和处理：3 毫秒

页面增强：45 毫秒

过渡：604 毫秒

总时间：670 毫秒

*这些值以毫秒为单位。

因此，如您所见，转换事件占用了近 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>

第二个.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>
   </head>
   <body>
    <!-- Home -->
    <div data-role="page" id="second">
        <div data-role="header">
            <h3>
                Second Page
            </h3>
        </div>
        <div data-role="content">

        </div> <!--content-->
    </div><!--page-->

  </body>
</html>

解决方案2：

或者，您可以为存储目的创建一个持久性 JavaScript 对象。只要 Ajax 用于页面加载（并且页面不会以任何方式重新加载），该对象就会保持活动状态。

var storeObject = {
    firstname : '',
    lastname : ''
}

示例：http : //jsfiddle.net/Gajotres/9KKbx/

解决方案3：

您还可以从上一页访问数据，如下所示：

$(document).on('pagebeforeshow', '#index',function (e, data) {
    alert(data.prevPage.attr('id'));
});

prevPage对象保存完整的前一页。

解决方案4：

作为最后一个解决方案，我们有一个漂亮的 localStorage 的 HTML 实现。它仅适用于 HTML5 浏览器（包括 Android 和 iOS 浏览器），但所有存储的数据都通过页面刷新保持不变。

if(typeof(Storage)!=="undefined") {
    localStorage.firstname="Dragan";
    localStorage.lastname="Gaic";
}

示例：http : //jsfiddle.net/Gajotres/J9NTr/

可能是最好的解决方案，但它会在某些版本的 iOS 5.X 中失败。这是一个众所周知的错误。

不要使用.live()/ .bind()/.delegate()

我忘了提及（和 tnx andleer提醒我）使用 on/off 进行事件绑定/解除绑定，live/die 和 bind/unbind 已弃用。

jQuery 的 .live() 方法在 1.3 版中引入 API 时被视为天赐之物。在一个典型的 jQuery 应用程序中，可能会有很多 DOM 操作，随着元素的来来去去，钩子和解钩会变得非常乏味。该.live()方法可以根据其选择器在应用程序的生命周期内挂钩一个事件。很棒吧？错了，.live()方法极其缓慢。该.live()方法实际上将其事件挂钩到文档对象，这意味着事件必须从生成事件的元素向上冒泡，直到它到达文档。这可能非常耗时。

现在已弃用。jQuery 团队的人不再推荐使用它，我也不推荐。尽管挂钩和取消挂钩事件可能很乏味，但没有该.live()方法的代码会比使用它快得多。

而不是.live()你应该使用.on(). .on()比.live()快大约 2-3 倍。看看这个事件绑定基准：http : //jsperf.com/jquery-live-vs-delegate-vs-on/34，一切都会从那里清楚。

基准测试：

有一个用于jQuery Mobile页面事件基准测试的优秀脚本。可以在这里找到：https : //github.com/jquery/jquery-mobile/blob/master/tools/page-change-time.js。但在你对它做任何事情之前，我建议你删除它的alert通知系统（每个“更改页面”都会通过停止应用程序向你显示这些数据）并将其更改为console.log正常运行。

基本上这个脚本会记录你所有的页面事件，如果你仔细阅读这篇文章（页面事件描述），你就会知道 jQm 在页面增强、页面转换上花费了多少时间......

最后的笔记

总是，我的意思是总是阅读官方的jQuery Mobile文档。它通常会为您提供所需的信息，并且与其他一些文档不同，这个文档相当不错，有足够的解释和代码示例。

变化：

• 30.01.2013 - 添加了多事件触发预防的新方法
• 31.01.2013 - 为页面转换之间的数据/参数操作章节添加了更好的说明
• 03.02.2013 -在页面转换之间的数据/参数操作一章中添加了新内容/示例
• 22.05.2013 - 添加了页面转换/更改预防解决方案，并添加了指向官方页面事件 API 文档的链接
• 18.05.2013 - 添加了另一个针对多事件绑定的解决方案

你们中的一些人可能会发现这很有用。只需将其复制粘贴到您的页面，您将获得在 Chrome 控制台 ( Ctrl+ Shift+ I)中触发事件的序列。

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

你会明白我的意思。

这是正确的方法：

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

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

jQuery-mobile 中文档就绪和页面事件之间的简单区别在于：

1. 文档就绪事件用于整个 HTML 页面，

   $(document).ready(function(e) {
       // Your code
   });
   

2. 当有页面事件时，用于处理特定的页面事件：

   <div data-role="page" id="second">
       <div data-role="header">
           <h3>
               Page header
           </h3>
       </div>
       <div data-role="content">
           Page content
       </div> <!--content-->
       <div data-role="footer">
           Page footer
       </div> <!--footer-->
   </div><!--page-->
   

您还可以使用 document 来处理 pageinit 事件：

$(document).on('pageinit', "#mypage", function() {

});

当您使用 .on() 时，它基本上是您正在使用的实时查询。

另一方面， .ready （如你的情况）是一个静态查询。使用时可以动态更新数据，无需等待页面加载。当输入特定值时，您可以简单地将值传递到您的数据库中（如果需要）。

实时查询的使用在我们输入数据（帐户或帖子甚至评论）的表单中很常见。