jQuery Mobile Page Events

jQuery Mobile Page Events

In jQuery Mobile, events that deal with pages are divided into four categories:

  • Page Initialization - Before page creation, when the page is created, and after page initialization
  • Page Load/Unload - When external pages load, unload, or fail
  • Page Transition - Before and after page transitions
  • Page Change - When a page is changed or fails

For complete information about all jQuery Mobile events, please visit ourjQuery Mobile Events Reference Manual。

jQuery Mobile Initialization Events

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

  • Before page creation
  • Page creation
  • Page initialization

The events triggered at each stage can be used to insert or manipulate code.

Event Description
pagebeforecreate This event is triggered when the page is about to be initialized, and before jQuery Mobile has started enhancing the page.
pagecreate This event is triggered when the page has been created, but before enhancement is complete.
pageinit This event is triggered when the page has been initialized, and after jQuery Mobile has completed enhancing the page.

The following example demonstrates when each type of event is triggered when creating a page in jQuery Mobile:

Example

$(document).on("pagebeforecreate",function(event){
alert("pagebeforecreate event triggered!");
});
$(document).on("pagecreate",function(event){
alert("pagecreate event triggered!");
});

Try it Yourself »

jQuery Mobile Load Events

Page load events apply to external pages.

Whenever an external page is loaded into the DOM, two events are triggered. The first is pagebeforeload, and the second is pageload (success) or pageloadfailed (failure).

The following table explains these events:

Event Description
pagebeforeload Triggered before any page load request is made.
pageload Triggered after the page has been successfully loaded and inserted into the DOM.
pageloadfailed If the page load request fails, this event is triggered. By default, an "Error Loading Page" message will be displayed.

The following demonstrates how the pageload and pagloadfailed events work:

Example

$(document).on("pageload",function(event,data){
alert("pageload event triggered!\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
alert("Sorry, the requested page does not exist.");
});

Try it Yourself »

jQuery Mobile Transition Events

We can also use events when transitioning from one page to the next.

Page transitions involve two pages: a "from" page and a "to" page - these transitions make the process of changing from the current active page (the "from" page) to the new page (the "to" page) more dynamic.

Event Description
pagebeforeshow Triggered on the "to" page, before the transition animation starts.
pageshow Triggered on the "to" page, after the transition animation completes.
pagebeforehide Triggered on the "from" page, before the transition animation starts.
pagehide Triggered on the "from" page, after the transition animation completes.

The following demonstrates how transition timing works:

Example

$(document).on("pagebeforeshow","#pagetwo",function(){ // when entering page two
alert("Page two is about to be displayed");
});
$(document).on("pageshow","#pagetwo",function(){ // when entering page two
alert("Page two is now displayed");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // when entering page two
alert("Page two is about to be hidden");
});
$(document).on("pagehide","#pagetwo",function(){ // When leaving pagetwo
alert("Page two is now hidden");
});

Try it Yourself »
Other Extensions