jQuery Mobile: Up and Running

Event Handling

jQuery Mobile provides new events available using the typical jQuery methods such as bind or live.

Page Events

We are used to normal HTML page events, such as load and DOMready events applied by the browser for each HTTP page loaded in the current session. In a jQuery Mobile framework, we have different elements where we apply events. As we already know, a jQuery Mobile document will have different pages (internal or loaded externally), so we need to think in terms of jQuery Mobile pages for loading.

Every page (element with data-role="page") has a set of different events that we can handle globally (for all the pages at the same time) or singly for an individual page.

To handle page events globally, we can call $(document).bind or to be more specific $(":jqmData(role='page')").bind. We can also use live instead of bind to allow binding to future pages to be added to the DOM in the future.

Every page has creation, loading, and showing events.

Creation events

Every page has its own creation or initialization events. The events available are:

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. This should be 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, we can bind a pageinit event using the jQuery live method: ...