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.