Understanding page initialization

In this section, we will look at why we don't use the traditional DOM-ready method to run initialization code for mobile pages. Suppose a page's content requires some sort of initialization, then using the traditional DOM-ready method $.ready can have a negative effect. This is because the $.ready method runs as soon as all the DOMs inside the document are loaded. In other words, we have no control over when to run the jQM page initialization code if it is inside the DOM ready handler.

However, jQM provides a specific event, pageinit, that caters for this scenario. All we need to do is to assign an id value inside the <div data-role='page'> markup, then define the pageinit event handler for that id value. Whenever a page is going to be initialized for display, this event is triggered. Note that the $.ready method is still going to be called, but we just don't use it in jQM. To demonstrate this concept, let us use the previous multipage example with...