jQuery Mobile Page Event

jQuery Mobile Page Event

Events dealing with pages in jQuery Mobile are divided into four categories:

  • Page Initialization - Before the page is created, when the page is created, and after the page is initialized
  • Page Load/Unload - When the external page is loaded, unloaded, or fails
  • Page Transition - Before and after page transition
  • Page Change - When the page is changed or fails

For complete information about all jQuery Mobile events, please visit our jQuery Mobile Event Reference Manual.

jQuery Mobile Initialization Event

When a typical page in jQuery Mobile is initialized, it goes through three stages:

  • Before the page is created
  • Page Creation
  • Page Initialization

Events triggered at each stage can be used to insert or operate code.

\u4e8b\u4ef6 \u63cf\u8ff0
pagebeforecreate This event is triggered when the page is about to be initialized and before jQuery Mobile begins to enhance the page.
pagecreate When the page has been created, but before the enhancement is completed, this event is triggered.
pageinit \u5982\u679c\u9875\u9762\u5df2\u521b\u5efa\u5b8c\u6210\u3002\u5728\u4ee3\u7528\u4f5c\u6e90\u5df2\u5b8c\u6210\u9875\u9762\u5149\u5b9e\u540e\u89e6\u53d1\u3002

\u4ee5\u4e0b\u4e3b\u4f8b\u6f14\u793a\u5728\u4ee3\u7528\u4f5c\u6e90\u4e2d\u521b\u5efa\u9875\u9762\u65f6\u4f1a\u89e6\u53d1\u6240\u6709\u4e8b\u4ef6\u3002

\u5b9e\u4f8b

$(document).on(\"pagebeforecreate\",function(event){
  alert(\"\u89e6\u53d1\u3002 pagebeforecreate \u4e8b\u4ef6\");
}); 
$(document).on(\"pagecreate\",function(event){
  alert(\"\u89e6\u53d1\u3002 pagecreate \u4e8b\u4ef6\");
});
$(document).on(\"pageinit\",function(event){
  alert(\"\u89e6\u53d1\u3002 pageinit \u4e8b\u4ef6\");
});

Try It Yourself

\u4ee3\u7528\u4f5c\u6e90\u5c0f\u624b\u4ee4\u8f6c\u4f53\u52a0\u8f7d\u4e8b\u4ef6

\u9875\u9762\u52a0\u8f7d\u4e8b\u4ef6\u5c5e\u4e8e\u5916\u90e8\u9875\u9762\u3002

\u6240\u6709\u5916\u90e8\u9875\u9762\u8d77\u8f7d DOM \u65f6\u9041\u53d1\u4e24\u4e2a\u4e8b\u4ef6\u3002\u7b2c\u4e00\u4e2a\u662f\u3002 pagebeforeload\u3002\u7b2c\u4e8c\u4e2a\u662f\u3002 pageload \u3002(\u6210\u529f) \u6216\u3002 pageloadfailed \u3002(\u5931\u8d25)\u3002

\u4e0b\u8868\u4e2d\u8bb2\u8ff0\u8be5\u4e8b\u4ef6\u3002

\u4e8b\u4ef6 \u63cf\u8ff0
pagebeforeload \u5728\u4efb\u4f55\u9875\u9762\u52a0\u8f7d\u8bf7\u6c42\u524d\u9041\u53d1\u3002
pageload \u5728\u9875\u9762\u5df2\u6210\u529f\u52a0\u8f7d\u5230\u3002 DOM \u540e\u5f00\u89e6\u53d1\u3002
pageloadfailed \u5982\u679c\u9875\u9762\u52a0\u8f7d\u8bf7\u6c42\u5931\u8d25\u3002\u9ed8\u8ba4\u5c06\u663e\u793a\"Error \u670d\u52a1\u9875\u9762\u52a0\u8f7d\" \u6b64\u6d88\u606f\u3002

\u4ee5\u4e0b\u6f14\u793a\u4e86\u3002 pageload \u548c\u3002 pagloadfailed \u4e8b\u4ef6\u7684\u529f\u5de5\u539f\u7406\u3002

\u5b9e\u4f8b

$(document).on(\"pageload\",function(event,data){
  alert(\"\u89e6\u53d1\u3002 pageload \u4e8b\u4ef6！\nURL: \" + data.url + \"\
});
$(document).on(\"pageloadfailed\",function(event,data){
  alert(\"\u62b1\u6f64\uff0c\u8bf7\u6c42\u9875\u9762\u4e0d\u5b58\u5728\");
});

Try It Yourself

\u4ee3\u7528\u4f5c\u6e90\u5c0f\u624b\u4ee4\u8f6c\u4f53\u4ee4\u4e8b\u4ef6

\u6211\u4eec\u8fd8\u53ef\u4ee5\u5728\u4e00\u9875\u9762\u8df3\u8f6c\u5230\u4e0b\u4e00\u9875\u9762\u65f6\u4f7f\u7528\u4e8b\u4ef6\u3002

\u9875\u9762\u8df3\u8f6c\u6bd4\u8c03\u53d6\u53d7\u4e24\u4e2a\u9875\u9762\u3002\u4e00\u5f20\u201c\u6765\u201d\u9875\u9762\u548c\u4e00\u5f20\u201c\u53bb\u201d\u9875\u9762\u3002\u8fd9\u4e9b\u8df3\u8f6c\u4f9f\u8be5\u4e0b\u52a0\u5c0f\u52a8\u8282\u7684\u529f\u5de5\u3002

\u4e8b\u4ef6 \u63cf\u8ff0
pagebeforeshow \u5728\u201c\u53bb\u201d\u9875\u9762\u89e6\u53d1\u3002\u5728\u8df3\u8f6c\u52a8\u753b\u5f00\u59cb\u524d\u3002
pageshow \u5728\u201c\u53bb\u201d\u9875\u9762\u89e6\u53d1\u3002\u5728\u8df3\u8f6c\u52a8\u753b\u5b8c\u6210\u540e\u3002
pagebeforehide \u5728\u201c\u6765\u201d\u9875\u9762\u89e6\u53d1\u3002\u5728\u8df3\u8f6c\u52a8\u753b\u5f00\u59cb\u524d\u3002
pagehide \u5728\u201c\u6765\u201d\u9875\u9762\u89e6\u53d1\u3002\u5728\u8df3\u8f6c\u52a8\u753b\u5b8c\u6210\u540e\u3002

\u4ee5\u4e0b\u6f14\u793a\u4e86\u8df3\u8f6c\u65f6\u95f4\u7684\u529f\u5de5\u539f\u7406\u3002

\u5b9e\u4f8b

$(document).on(\"\u9875beforeshow\","#pagetwo",function(){ // When entering page two
  alert(\"\u9875\u9762\u4e8b\u5c06\u663e\u793a\");
});
$(document).on("pageshow","#pagetwo",function(){ // When entering page two
  alert("Now show page two");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // When leaving page two
  alert("Page two will be hidden");
});
$(document).on("pagehide","#pagetwo",function(){ // When leaving page two
  alert("Now hide page two");
});

Try It Yourself