jQuery pagebeforeshow Event

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

jQuery Mobile Events

## Example

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

$(document).on("pagebeforeshow","#pagetwo",function(){
alert("pagebeforeshow event fired - pagetwo is about to be shown");
});
Try it yourself »

## Definition and Usage

The pagebeforeshow event is triggered on the "to" page, before the transition animation starts.

Related events:

- 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

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("pagebeforeshow",function(event){...}) Try it

To trigger the event for a specific page:

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

Parameter | Description
--- | ---

function(event,data)

Required. Specifies the function to run when the pagebeforeshow 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 pagebeforeshow event for. For internal pages, use #id. For external pages, use externalfile.html.

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

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