jQuery Mobile provides new events available using the typical jQuery
methods such as
We are used to normal HTML page events, such as
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
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.
Every page has its own creation or initialization events. The events available are:
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. This should be 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, we can bind a
pageinit event using the jQuery
live method: ...