Thanks to the AJAX navigation and progressive enhancement inherent in jQuery Mobile, there are a lot of different and extra events. Let's consider the three unique jQuery Mobile events I've found most useful. We're not going to immediately use them, just be aware of them and be sure to read the comments. Follow along by opening /js/global.js
and reading the following script:
$(document).on('pagecreate', 'div[data-role="page"]', function(event){ /* Triggered when the page has been created in the DOM (via ajax or other) and after all widgets have had an opportunity to enhance the contained markup. */ }); $(document).on('pagecontainerbeforeshow', 'div[data-role="page"]', function(event){ /* Triggered before the actual transition animation is kicked off. */ }); $(document).on('pagecontainershow', 'div[data-role="page"]', function(event){ /* Triggered after the transition animation has completed. */ });