Understanding page initialization

In this section, we will learn the concept of why we don't use the traditional DOM ready method to run initialization code for mobile pages. Suppose a page content requires some sort of initialization, using the traditional DOM ready method, $.ready, that can have an undesired 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 page initialization code, if it is inside the DOM ready handler.

However, jQM provides a specific event, pageinit, catered 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 the 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 multi-page...