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

Question

jQuery Mobile：文档准备与页面事件我正在使用jQuery Mobile，我无法理解经典文档就绪和jQuery Mobile页面事件之间的差异。真正的区别是什么？为何要<!-- language: lang-js -->$(document).ready() { });比...更好$(document).on('pageinit') {});当您从一个页面转换到另一个页面时，页面事件的顺序是什么？如何将数据从一个页面发送到另一个页面，是否可以从上一页访问数据？

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中文档就绪和页面事件之间的简单区别在于：

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

您还可以使用文档处理pageinit事件：

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