jQuery Mobile Page Events

jQuery Mobile Page Events

In jQuery Mobile, the events dealing with pages are categorized into four types:

• 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 encounters a failure

• Page Transition - Before and after the page transition

• Page Change - When the page is changed, or encounters a failure

For complete information on all jQuery Mobile events, please visit our jQuery Mobile Events Reference Manual.

jQuery Mobile Initialization Events

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

• Before the page is created

• Page creation

• Page initialization

Events triggered in each phase can be used to insert or manipulate code.

The following example demonstrates when each event is triggered during the creation of a page in jQuery Mobile:

Example

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

jQuery Mobile Load Events

Page load events pertain to external pages.

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

These events are explained in the table below:

The following demonstrates how the pageload and pageloadfailed events work:

Example

jQuery Mobile Transition Events

We can also use events during the transition from one page to the next.

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

The following demonstrates how transition events work:

Example