Events for handling pages in jQuery Mobile are divided into four categories:
For a complete reference of all the jQuery Mobile events, please go to our jQuery Mobile Events Reference.
When a typical page in jQuery Mobile is initialized, it goes through two stages:
Each stage has an event that can be used to insert or manipulate code before or when jQuery Mobile enhances the page.
|pagebeforecreate||Triggered when the page is about to be initialized, and before jQuery Mobile has started enhancing the page|
|pagecreate||Triggered when the page has been created, but before enhancement is complete|
The example below demonstrates when each event fires when a page is created in jQuery Mobile:
Page load events are for external pages.
Whenever an external page is loaded into the DOM, 2 events fire. The first is pagecontainerbeforeload, and the second will either be pagecontainerload (success) or pagecontainerloadfailed (fail).
These events are explained in the table below:
|pagecontainerbeforeload||Triggered before any page load request is made|
|pagecontainerload||Triggered after the page has been successfully loaded and inserted into the DOM|
|pagecontainerloadfailed||Triggered if the page load request fails. By default, it will show the "Error Loading Page" message|
The example below demonstrates how the pagecontainerload and pagecontainerloadfailed events work:
We can also use events for when we transition from one page to the next.
Page transitions involve two pages: a "from" page and a "to" page - these transitions animate the change from the current active page (fromPage) to a new page (toPage).
|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 example below demonstrates how the transition events work: