jQuery Mobile pagebeforeshowEvents

Examples

Before the page is displayed after the page transition, pop up a text message:

$(document).on("pagebeforeshow","#pagetwo",function(){
alert("pagebeforeshow event triggered - Page 2 is about to be displayed");
});

pagebeforeshow is an event that is triggered before the page is displayed after a page transition.

Related events:

pageshow- The event that is triggered after the page is displayed after the page transition.
pagebeforehide- The event that is triggered before the old page is hidden after the page transition.
pagehide- The event that is triggered after the old page is hidden after the page transition.

Note:This event is triggered at the start/stop of each page transition.

To trigger the event for all pages in jQuery Mobile:

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

Trigger the event for a specified page:

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

Parameter	Description
function(event,data)	Required. Specifies the function to execute when the pagebeforeshow event is triggered. This function contains the following two parameters: Event object- Includes any jQuery event properties (event.target, event.type, etc.). For more information, please refer to thejQuery Event Reference Manual Data object- Contains the property prevPage, which returns the previous page of the transition.
page	Optional. The page id that the pagebeforeshow event points to. For internal pages, use #id. For external pages, use externalfile.html。

Parameter

Description

function(event,data)

Required. Specifies the function to execute when the pagebeforeshow event is triggered.

This function contains the following two parameters:

Event object- Includes any jQuery event properties (event.target, event.type, etc.). For more information, please refer to thejQuery Event Reference Manual
Data object- Contains the property prevPage, which returns the previous page of the transition.

page

Optional. The page id that the pagebeforeshow event points to. For internal pages, use #id. For external pages, use externalfile.html。

Demonstrate related events
This example demonstrates the triggering of the pagebeforeshow, pageshow, pagebeforehide, and pagehide events.

Event object
Use the event.type property to return the type of event triggered.

Data object
Use the prevPage property to return the previous page of the transition.

Other Extensions