jQuery Mobile准备文档与页面事件（jquery准备函数）

25-02-06 18

在这篇文章中，我们将带领您了解jQueryMobile准备文档与页面事件的全貌，包括jquery准备函数的相关情况。同时，我们还将为您介绍有关jQueryMobile：准备文档与页面事件、jQuery

在这篇文章中，我们将带领您了解jQuery Mobile准备文档与页面事件的全貌，包括jquery准备函数的相关情况。同时，我们还将为您介绍有关jQuery Mobile：准备文档与页面事件、jQuery Mobile：文档就绪与页面事件、jquery-mobile – jQuery Mobile 1.4中使用的role =“main”是什么？、jquery-mobile – jQuery Mobile ajaxEnabled不起作用？的知识，以帮助您更好地理解这个主题。

本文目录一览：

jQuery Mobile准备文档与页面事件（jquery准备函数）
jQuery Mobile：准备文档与页面事件
jQuery Mobile：文档就绪与页面事件
jquery-mobile – jQuery Mobile 1.4中使用的role =“main”是什么？
jquery-mobile – jQuery Mobile ajaxEnabled不起作用？

jQuery Mobile准备文档与页面事件（jquery准备函数）

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

真正的区别是什么？

为何要

    <!-- language: lang-js -->$(document).ready() {});

胜过

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

从一页切换到另一页时，页面事件的顺序是什么？
如何将数据从一页发送到另一页，并且可以访问前一页的数据？

答案1

小编典典

jQuery Mobile 1.4更新：

我的原始文章旨在用于旧的页面处理方式，基本上是jQuery Mobile
1.4之前的所有内容。现在不赞成使用旧的处理方式，它会一直保持有效状态，直到（包括）jQuery Mobile
1.5，因此您仍然可以使用下面提到的所有功能，至少直到明年和jQuery Mobile 1.6为止。

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

如果您对页面事件处理的新方法感兴趣。即使您正在使用jQueryMobile1.4或更高版本，也应该阅读此答案，它不仅仅包含页面事件，因此您可能会发现很多有用的信息。

较旧的内容：

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

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

经典jQuery语法：

$(document).ready(function() {});

为了解决此问题（并相信我这是一个问题），jQueryMobile开发人员创建了页面事件。简而言之，页面事件是在页面执行的特定点触发的事件。这些页面事件之一是 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">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 事件。

关于这个问题的更多笔记。无论您使用的是1个html多个页面还是多个HTML文件范例，建议您将所有自定义JavaScript页面处理都分成一个单独的JavaScript文件。这将使您的代码变得更好，但是您将获得更好的代码概述，尤其是在创建
jQuery Mobile 应用程序时。

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

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

页面事件转换顺序

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

页面B-事件 pagebeforecreate
页面B-事件页面创建
页面B-事件 pageinit
A页-事件 pagebehidehide
页面A-事件页面删除
页面A-事件页面隐藏
页面B-事件页面
页面B-活动页面显示

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

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

如果未启用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应用程序的工作方式不同。根据每次访问某个页面时如何绑定事件的方式，它将一遍又一遍地绑定事件。这不是错误，仅是如何 jQueryMobile 处理其页面。例如，看下面的代码片段：

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

每次您访问页面 #index click事件都会绑定到 ＃test-button按钮
。从第1页移至第2页并多次返回进行测试。有几种方法可以防止此问题：

解决方案1

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

该工作解决方案是在先前有问题的示例的基础上提出的。

解决方案2

在绑定事件之前将其删除：

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

解决方案3

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

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

简而言之，如果您最关心速度，那么 解决方案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;        }    });});

pageChange事件怪癖-触发两次

有时pagechange事件可以触发两次，并且与前面提到的问题没有任何关系。

pagebeforechange事件发生两次的原因是由于toPage不是jQuery增强的DOM对象时changePage中的递归调用。这种递归很危险，因为允许开发人员在事件内更改toPage。如果开发人员在pagebeforechange事件处理程序中始终将toPage设置为字符串，则无论它是否是对象，都将导致无限递归循环。pageload事件将新页面作为数据对象的page属性传递（应将其添加到文档中，当前未列出）。因此，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％的执行时间。

页面转换之间的数据/参数操作

在页面转换期间可以将参数从一个页面发送到另一页面。它可以通过几种方式来完成。

解决方案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);});

index.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>

second.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 : ''''}

解决方案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";}

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

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

jQuery的.live（）方法在1.3版引入API时被视为天赐之物。在典型的jQuery应用程序中，可能会有很多DOM操作，并且随着元素的来去去去钩挂和脱钩会变得非常繁琐。该.live()方法可以根据应用程序的选择器在应用程序的生命周期中挂钩事件。很好吗？错误的，该.live()方法非常慢。该.live()方法实际上将其事件挂接到文档对象，这意味着该事件必须从生成该事件的元素起泡直到到达文档。这可能非常耗时。

现在已弃用。jQuery团队的人们不再推荐使用它，我也不推荐使用。即使挂接和取消挂接事件可能很繁琐，但没有该.live()方法的代码将比使用该方法更快。

而不是 .live() 您应该使用 .on() 。 .on() 比 .live（）
快大约2-3倍。看一下这个事件绑定基准：
live-vs-delegate-vs-on/34)，从那里可以清楚地看到所有内容。

基准测试：

jQuery Mobile

change-time.js)。但是在您执行任何操作之前，我建议您删除其 alert
通知系统（每个“更改页”都将通过停止该应用程序向您显示此数据）并将其更改为 console.log 功能。

基本上，此脚本将记录您的所有页面事件，如果您仔细阅读本文（页面事件描述），您将知道jQm在页面增强，页面转换…上花费了多少时间。

最后的笔记

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

变化：

30.01.2013-添加了防止多事件触发的新方法
2013年1月31日-为页面转换之间的数据/参数操作* 一章添加了更好的说明 *
2013年3月2日- 在页面转换之间的数据/参数操作* 一章中添加了新的内容/示例 *
2013年5月22日-添加了用于防止页面过渡/更改的解决方案，并添加了指向官方页面事件API文档的链接
2013年5月18日-添加了另一个针对多个事件绑定的解决方案

jQuery Mobile：准备文档与页面事件

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

真正的区别是什么？

为何要

    <!-- language: lang-js -->$(document).ready() {});

胜过

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

从一页切换到另一页时，页面事件的顺序是什么？
如何将数据从一页发送到另一页，并且可以访问前一页的数据？

答案1

小编典典

jQuery Mobile 1.4更新：

我的原始文章旨在用于旧的页面处理方式，基本上是jQuery Mobile 1.4之前的所有内容。现在不赞成使用旧的处理方式，它会一直保持有效状态，直到（包括）jQuery Mobile 1.5，因此你仍然可以使用下面提到的所有功能，至少直到明年和jQuery Mobile 1.6为止。

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

如果你对页面事件处理的新方法感兴趣。即使你正在使用jQuery Mobile 1.4或更高版本，也应该阅读此答案，它不仅仅包含页面事件，因此你可能会发现很多有用的信息。

较旧的内容：
本文也可以在我的博客HERE中找到。

$(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">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事件。

关于这个问题的更多笔记。无论你使用的是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，这是一个卸载/加载顺序：

页面B-事件pagebeforecreate
页面B-事件页面创建
页面B-事件pageinit
A页-事件pagebehidehide
页面A-事件页面删除
页面A-事件页面隐藏
页面B-事件页面
页面B-活动页面显示

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

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

如果未启用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'');    });});

每次你访问页面#index click事件都会绑定到＃test-button按钮。从第1页移至第2页并多次返回进行测试。有几种方法可以防止此问题：

解决方案1

最好的解决方案是使用pageinit绑定事件。如果你查看正式文档，就会发现pageinit仅触发一次，就像准备好文档一样，因此不可能再次绑定事件。这是最好的解决方案，因为你没有像使用off方法删除事件时那样的处理开销。

该工作解决方案是在先前有问题的示例的基础上提出的。

解决方案2

在绑定事件之前将其删除：

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

解决方案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;        }    });});

pageChange事件怪癖-触发两次

有时pagechange事件可以触发两次，并且与前面提到的问题没有任何关系。

简而言之，这是因为你正在通过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％的执行时间。

页面转换之间的数据/参数操作
在页面转换期间可以将参数从一个页面发送到另一页面。它可以通过几种方式来完成。

解决方案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);});

范例：

index.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>

second.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 : ''''}

解决方案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";}

可能是最佳解决方案，但在某些版本的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：文档就绪与页面事件

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

真正的区别是什么？

为何要

    <!-- language: lang-js -->$(document).ready() {});

优于

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

当您从一个页面转换到另一个页面时，页面事件的顺序是什么？
如何将数据从一页发送到另一页，是否可以访问前一页的数据？

答案1

小编典典

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 index 的 jQuery Mobile 页面：

<div data-role="page" id="index">    <div data-theme="a" data-role="header">        <h3>            First Page        </h3>        <a href="#second">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，这是一个卸载/加载顺序：

页面 B - 创建之前的事件页面
页面 B - 事件页面创建
页面 B - 事件页面 初始化
页面 A - 事件页面 前隐藏
页面 A - 事件页面删除
页面 A - 事件页面隐藏
页面 B - 演出前的活动页面
页面 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
页并返回几次来测试它。有几种方法可以防止此问题：

解决方案 1

最好的解决方案是使用 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 事件将新页面作为数据对象的 page
属性传递（这应该添加到文档中，当前未列出）。因此，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>

要解决此问题，请使用Page events transition order 中列出的任何页面事件。

页面更改时间

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

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

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

页面加载和处理： 3 ms

页面增强： 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()`

使用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 - 添加了另一个针对多事件绑定的解决方案

jquery-mobile – jQuery Mobile 1.4中使用的role =“main”是什么？

jQuery Mobile 1.4已经改变

<div data-role="content">...</div>

成

<div role="main">...</div>

我理解现在使用类而不是数据角色的目的,但我不明白的是这个角色=“主”.它是干什么用的？

解决方法

角色属性是HTML5的原生属性,旨在支持WAI-ARIA.
见 http://www.w3.org/TR/html5/dom.html#wai-aria和 http://www.w3.org/TR/wai-aria/roles#role_definitions

早期版本中的jQuery Mobile简单地将具有属性data-role =“content”的元素转换为主元素< div role =“main”> (相当于< main>)并添加了CSS.所以你得到< div role =“main”class =“ui-content”> .

对于data-role =“content”的元素,没有其他处理或添加标记.通过弃用data-role =“content”属性并使用直接使用正确的HTML5(CSS和WAI-ARIA角色),jQuery Mobile将不得不为每个页面执行更少的处理.

jquery-mobile – jQuery Mobile ajaxEnabled不起作用？

运行jQuery Mobile(1.0.1)的最新版本,不想使用 AJAX进行页面导航.

我添加了以下代码,根据jQuery Mobile网站应该停止使用AJAX：

$(document).bind("mobileinit",function () {
    $.mobile.ajaxEnabled = false;
});

但它仍然使用AJAX并将哈希(#)添加到URL.

如何禁用AJAX的使用？

解决方法

只是一个猜测,但是你在jQuery Mobile加载之前是否绑定到mobileinit？

如documentation所述,您需要按照以下顺序加载JavaScript文件：

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

关于jQuery Mobile准备文档与页面事件和jquery准备函数的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于jQuery Mobile：准备文档与页面事件、jQuery Mobile：文档就绪与页面事件、jquery-mobile – jQuery Mobile 1.4中使用的role =“main”是什么？、jquery-mobile – jQuery Mobile ajaxEnabled不起作用？等相关内容，可以在本站寻找。

本文标签：