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

Question

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

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

1. 真正的区别是什么？

   为何要

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

   比...更好

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

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

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

Answer 1

有些人可能会觉得这很有用。只需将其粘贴到您的页面即可，您将获得一个在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");});你会明白我的意思。

Answer 2

这是正确的方法：要执行只能用于索引页面的代码，我们可以使用以下语法：$(document).on('pageinit', "#index",  function() {     ...});

Answer 3

jQuery-mobile中文档就绪和页面事件之间的简单区别在于：文档就绪事件用于整个HTML页面，$(document).ready(function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Your&nbsp;code});当有页面事件时，用于处理特定页面事件：<div&nbsp;data-role="page"&nbsp;id="second"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;data-role="header"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h3> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Page&nbsp;header&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h3> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;data-role="content"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Page&nbsp;content&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;<!--content--> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;data-role="footer"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Page&nbsp;footer&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;<!--footer--></div><!--page-->您还可以使用文档处理pageinit事件：$(document).on('pageinit',&nbsp;"#mypage",&nbsp;function()&nbsp;{});