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.
Event | Description |
---|---|
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:
Event | Description |
---|---|
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).
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 example below demonstrates how the transition events work: