X
HOME HTML5 CSS3 JAVASCRIPT SQL PHP5 JQUERY ANGULAR BOOTSTRAP3 XML MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

jQuery pageshow Event

jQuery Mobile Events jQuery Mobile Events

Example

Alert some text when the page we are transitioning to, is shown:

$(document).on("pageshow","#pagetwo",function(){
  alert("pageshow event fired - pagetwo is now shown");
});

Try it yourself »

Definition and Usage

The pageshow event is triggered on the "to" page, after the transition animation completes.

Related events:

  • pagebeforeshow - Triggered on the "to" page, before the transition animation starts
  • pagebeforehide - Triggered on the "from" page, before the transition animation starts
  • pagehide - Triggered on the "from" page, after the transition animation completes

Note: This event is triggered every time a page transition starts/stops.


Syntax

To trigger the event for all pages in jQuery Mobile:

$("document").on("pageshow",function(event){...}) Try it

To trigger the event for a specific page:

$("document").on("pageshow","page",function(event,data){...}) Try it

Parameter Description
function(event,data) Required. Specifies the function to run when the pageshow event occurs.

The function has two optional parameters:

  • The event object - which can contain any jQuery event properties (e.g. event.target, event.type, etc.) See jQuery Events Reference for more information
  • The data object - contains one property, the prevPage, which returns the page we are transitioning away from
page Optional. Points to the id of the page to specify the pageshow event for. For internal pages, use #id. For external pages, use externalfile.html.


Examples

Try it Yourself - Examples

A demonstration of related events
A demonstration that shows when pagebeforeshow, pageshow, pagebeforehide and pagehide fire.

The event object
Using the event.type property to return the triggered event type.

The data object
Using the prevPage property to return the page we are transitioning away from.


jQuery Mobile Events jQuery Mobile Events


Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook