jQuery Mobile Page Events

jQuery Mobile Page Events

Events for taking care of pages in jQuery Mobile are separated into four classifications:

  • Page Initialization - Before page creation, and when the page has been created
  • Page Load/Unload - When an outside page is stacking, emptying or experiences a failure
  • Page Transition - Before and after page transitions
  • Page Change - When pages are changed to or from, or experiences a failure

For a total reference of all the jQuery Mobile occasions, if it's not too much trouble go to our jQuery Mobile Events Reference.

jQuery Mobile Initialization Events

When a common page in jQuery Mobile is instated, it experiences two stages:

  • Before page creation
  • Page creation

Each organize has an occasion that can be utilized to embed or control code previously or on the other hand when jQuery Mobile improves the page.

Event Description
pagebeforecreate Triggered when the page is going to be introduced, and before jQuery Mobile has begun improving the page
pagecreate Triggered when the page has been made, yet before improvement is complete

The precedent underneath exhibits when every occasion fires when a page is made in jQuery Mobile:


  alert("pagebeforecreate occasion fired!");
  alert("pagecreate occasion fired!");
Try it yourself »

jQuery Mobile Load Events

Page load occasions are for outside pages.

Whenever an outside page is stacked into the DOM, 2 occasions flame. The first is pagecontainerbeforeload, and the second will either be pagecontainerload (achievement) or pagecontainerloadfailed (fail).

These occasions are clarified in the table below:

Event Description
pagecontainerbeforeload Triggered before any page load demand is made
pagecontainerload Triggered after the page has been effectively stacked and embedded into the DOM
pagecontainerloadfailed Triggered if the page load demand comes up short. Of course, it will demonstrate the "Error Loading Page" message

The model beneath shows how the pagecontainerload and pagecontainerloadfailed occasions work:


  alert("pageload occasion fired!\nURL: " + data.url);
  alert("Sorry, mentioned page does not exist.");
Try it yourself »

jQuery Mobile Transition Events

We can likewise utilize occasions for when we change from one page to the next.

Page changes include two pages: a "from" page and a "to" page - these advances energize the change from the present dynamic page (fromPage) to another page (toPage).

Event Description
pagebeforeshow Triggered on the "to" page, before the change movement starts
pageshow Triggered on the "to" page, after the change movement completes
pagebeforehide Triggered on the "from" page, before the change movement starts
pagehide Triggered on the "from" page, after the change movement completes

The precedent beneath shows how the change occasions work:


$(document).on("pagebeforeshow","#pagetwo",function(){/When entering pagetwo
  alert("pagetwo is going to be shown");
$(document).on("pageshow","#pagetwo",function(){ /When entering pagetwo
  alert("pagetwo is currently shown");
$(document).on("pagebeforehide","#pagetwo",function(){ /When leaving pagetwo
  alert("pagetwo is going to be hidden");
$(document).on("pagehide","#pagetwo",function(){ /When leaving pagetwo
  alert("pagetwo is currently hidden");
Try it yourself »