Understanding the Mobile Initialization Event
jQuery Mobile uses AJAX to load the contents of each page rather than reload the entire DOM structure. The $(document).ready() function only runs once per page load, not per AJAX call. In jQuery Mobile, the $(document).ready() function doesn’t run once per page, but rather once per site unless a page refresh is requested or performed by the user. This means that some of the default settings that need to be set by jQuery Mobile cannot be set in the $(document).ready() function because they would not be applied to pages included through AJAX.
Listing 4.5 Including jQuery, an Inline mobileinit Script, and jQuery Mobile
Now that we know that we can change some of the default settings of jQuery Mobile with the mobileinit event what do we do when we want an event or function to be triggered when a new page is loaded? I’m fairly sure that you are thinking, “That’s easy! Just use the $(document).ready() function on the page you are loading and you’ll be all set!” While that is normally the correct answer, we have to remember that all pages are inserted into the DOM through AJAX. This means that the DOM is only loaded once, making the $(document).ready() function load on the first page only. Luckily jQuery Mobile has a solution for this problem: You just need to use the pageinit event.