Page Creation Events

Each page has its own creation or initialization events

pagebeforecreate

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

pagecreate

After the page is created but before widgets are rendered.

pageinit

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

pageremove

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:

pagebeforeload

Executed before any AJAX request is done

pageload

Executed after the page was loaded and inserted into the DOM

pageloadfailed

Executed when the page could not be loaded

Showing events

pagebeforechange

Executed before the change is made and before any transition begins

pagechange

Executed after the change is done

pagechangefailed

Executed if the change could not be done

Orientation Event

orientationchange

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
	}
	else
	{
		// We are now in portrait
	}
});

 

Gesture Events

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

tap

Executed after a quick touch on the screen.

taphold

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

swipeleft

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

swiperight

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.

 

 

 

 

Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.

Comments

Your email address will not be published. Required fields are marked *