Page Creation Events

Each page has its own creation or initialization events


After the page is inserted in the DOM and before its widgets are created.


After the page is created but before widgets are rendered.


After the page is fully loaded. Normally the most used event for a page.


After the page was removed from the DOM (usually when it was an AJAX-loaded page that is not currently the active page). For example you can bind a pageinit event using the jQuery live method:

$("#page2").live("pageinit", function(event) {


Loading events

For every page loaded using AJAX there are special event handlers that usually are bound to $(document) because the pages are not in the DOM yet to bind the handler to.
The available loading events are:


Executed before any AJAX request is done


Executed after the page was loaded and inserted into the DOM


Executed when the page could not be loaded

Showing events


Executed before the change is made and before any transition begins


Executed after the change is done


Executed if the change could not be done

Orientation Event


Mobile device has changed orientation.

This event is currently linked to resize on some platforms where native orientationchange is not supported. On some platforms, when the orientationchange event is fired the window frame is still old so you will not get the right width/ height values. 

$(document).bind("orientationchange", function(orientation) {
	if (orientation == "landscape") {
		// We are now in landscape
		// We are now in portrait


Gesture Events

jQuery Mobile provides gesture touch events that you can bind to any DOM element.


Executed after a quick touch on the screen.


Executed when the user touches the screen and maintains it pressed for one second (useful for showing contextual menus).


Executed when the user swipes a finger from right to left.


Executed when the user swipes a finger from left to right.

$(document).bind("mobileinit", function() {
	$("#page2").live("swiperight", goBackToPage1);

function goBackToPage1() {
	$.mobile.changePage("#page1", { reverse: true });
	$("#page2").unbind("swiperight", goBackToPage1);

Virtual Click Events

Most mobile touch web browsers have a delay of 300– 500 milliseconds when you are using click events (such as click, mouseover) and this delay is not there when you are using touch events (such as touchstart, touchmove). Also not every touch browser supports touch events. Virtual click events are wrappers that can be used instead of touch or click events and they will choose the right one depending on the platform being used. It also normalizes position information and can be used only for single touch (not multi-touch). Virtual click events can be used exactly the same as the click events, but the event name has a v prefix:- vclick, vmouseover, vmousedown, vmousemove, vmouseup, and vmousecancel.





We benefit hugely from resources on the web so we decided we should try and give back some of our knowledge and resources to the community by opening up many of our company’s internal notes and libraries through mini sites like this. We hope you find the site helpful.
Please feel free to comment if you can add help to this page or point out issues and solutions you have found, but please note that we do not provide support on this site. If you need help with a problem please use one of the many online forums.


Your email address will not be published.