jQuery Mobile 1.4 Update

The original article was intended for the old way of handling pages, which was used before jQuery Mobile 1.4. This old way is now deprecated and will remain active until jQuery Mobile 1.5 (inclusive), meaning you can still use everything mentioned below until at least next year and jQuery Mobile 1.6.

Old events, including pageinit, no longer exist and have been replaced with the pagecontainer widget. Pageinit is completely erased, and you can use pagecreate instead, which remains unchanged.

If you are interested in the new way of handling page events, refer to this article. Otherwise, feel free to continue reading this article, as it covers more than just page events and may provide valuable information.

Older content

This article can also be found as part of my blog HERE.

$(document).on('pageinit') vs $(document).ready()

When you first learn jQuery, you are taught to call code inside the $(document).ready() function so that everything executes as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, which means $(document).ready() will trigger before your first page is loaded. Consequently, any code intended for page manipulation will execute after a page refresh, which can lead to subtle bugs. On some systems, it may appear to work fine, but on others, it may cause erratic and difficult-to-repeat behavior.

Classic jQuery syntax:

$(document).ready(function() {

});

To solve this issue (which is indeed a problem), jQuery Mobile developers created page events. In a nutshell, page events are events triggered at specific points of page execution. One such page event is pageinit, which we can use as follows:

$(document).on('pageinit', function() {

});

We can go further by using a page ID instead of a document selector. Let's say we have a jQuery Mobile page with an ID of index:

<div data-role="page">

To execute code that will only be available to the index page, we could use this syntax:

$('#index').on('pageinit', function() {

});

The pageinit event will execute every time the page is about to be loaded and shown for the first time. It will not trigger again unless the page is manually refreshed or Ajax page loading is turned off. In case you want code to execute every time you visit a page, it is better to use the pagebeforeshow event.

Here's a working example to demonstrate this problem: http://jsfiddle.net/Gajotres/Q3Usv/

A few more notes on this question. No matter if you are using 1 HTML with multiple pages or the multiple HTML files paradigm, it is advised to separate all of your custom JavaScript page handling into a single separate JavaScript file. This will not make your code any better, but it will provide a much better code overview, especially while creating a jQuery Mobile application.

There's also another special jQuery Mobile event called mobileinit. When jQuery Mobile starts, it triggers a mobileinit event on the document object. To override default settings, bind them to mobileinit. One good example of mobileinit usage is turning off Ajax page loading or changing default Ajax loader behavior.

$(document).ready(function() {

});

Page events transition order

A list of all page events can be found here: http://api.jquerymobile.com/category/events/

Let's say we have a page A and a page B; this is the unload/load order:

1. page B - event pagebeforecreate
2. page B - event pagecreate
3. page B - event pageinit
4. page A - event pagebeforehide
5. page A - event pageremove
6. page A - event pagehide
7. page B - event pagebeforeshow
8. page B - event pageshow

For a better understanding of page events, read this:

• pagebeforeload, pageload,

The above is the detailed content of jQuery Mobile: `$(document).ready()` vs. `$(document).on('pageinit')` – Which Should I Use?. For more information, please follow other related articles on the PHP Chinese website!