jQuery Mobile Page Events

## jQ Mobile Tutorial

jQ Mobile HOME jQ Mobile Intro jQ Mobile Install jQ Mobile Pages jQ Mobile Transitions jQ Mobile Buttons jQ Mobile Icons jQ Mobile Toolbars jQ Mobile Navbars jQ Mobile Collapsibles jQ Mobile Grids

## jQ Mobile Lists

jQ Mobile List Views jQ Mobile List Content

## jQ Mobile Forms

jQ Mobile Form Basic jQ Mobile Form Inputs jQ Mobile Form Select jQ Mobile Form Sliders

## jQ Mobile Themes

jQ Mobile Themes

## jQ Mobile Events

jQ Mobile Events jQ Mobile Touch jQ Mobile Scroll jQ Mobile Orientation jQ Mobile Page Events

## Examples

jQ Mobile Examples

## References

jQ Data Attributes jQ Events jQ Icons

# jQuery Mobile Page Events

« Previous
Next Chapter »

## jQuery Mobile Page Events

Events for handling pages in jQuery Mobile are divided into four categories:

- Page Initialization - Before page creation, when the page is created, and after the page is initialized
- Page Load/Unload - When an external page is loading, unloading or encounters a failure
- Page Transition - Before and after page transitions
- Page Change - When pages are changed to or from, or encounters a failure

For a complete reference of all the jQuery Mobile events, please go to our jQuery Mobile Events Reference.

## 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

Each stage has an event that can be used to insert or manipulate code before or after 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 is created, but before enhancement is complete
pageinit | Triggered when the page is initialized and after jQuery Mobile has finished enhancing the page

The example below demonstrates when each event fires when a page is created in jQuery Mobile:

## Example

$(document).on("pagebeforecreate",function(event){
alert("pagebeforecreate event fired!");
});
$(document).on("pagecreate",function(event){
alert("pagecreate event fired!");
});
$(document).on("pageinit",function(event){
alert("pageinit event fired!")
});
Try it yourself »

## jQuery Mobile Load Events

Page load events are for external pages.

Whenever an external page is loaded into the DOM, 2 events fire. The first is pagebeforeload, and the second will either be pageload (success) or pageloadfailed (fail).

These events are explained in the table below:

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 | Triggered if the page load request fails. By default, it will show the "Error Loading Page" message

The example below demonstrates how the pageload and pagloadfailed events work:

## Example

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

## jQuery Mobile Transition Events

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:

## Example

$(document).on("pagebeforeshow","#pagetwo",function(){ // When entering pagetwo
alert("pagetwo is about to be shown");
});
$(document).on("pageshow","#pagetwo",function(){ // When entering pagetwo
alert("pagetwo is now shown");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // When leaving pagetwo
alert("pagetwo is about to be hidden");
});
$(document).on("pagehide","#pagetwo",function(){ // When leaving pagetwo
alert("pagetwo is now hidden");
});
Try it yourself »
« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE