jQuery Mobile Page Event

jQuery Mobile Page Event

Events related to 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 an external page is loaded, unloaded, or fails
  • Page Transition - Before and after the page transition
  • Page Change - When the page is changed or fails

For complete information on 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 manipulate code.

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

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

Example

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

Try It Yourself

jQuery Mobile Load Events

Page load events belong 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 (successful) or pageloadfailed (failed).

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, the message 'Error Loading Page' is displayed.

The following demonstrates the working principle of the pageload and pageloadfailed events:

Example

$(document).on("pageload",function(event,data){
  alert("Triggered pageload event!\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: one 'incoming' page and one 'outgoing' page - these transitions make the process of changing from the current active page ('incoming' page) to the new page ('outgoing' page) more dynamic.

Event Description
pagebeforeshow Triggered on the 'outgoing' page, before the transition animation begins.
pageshow Triggered on the 'outgoing' page, after the transition animation is complete.
pagebeforehide Triggered on the 'incoming' page, before the transition animation begins.
pagehide Triggered on the 'incoming' page, after the transition animation is complete.

The following demonstrates the working principle of the transition time:

Example

$(document).on("pagebeforeshow","#pagetwo",function(){ // When entering page two
  alert("The second page is about to be displayed");
});
$(document).on("pageshow","#pagetwo",function(){ // When entering page two
  alert("Now display 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