If you want to have full control over your jQuery Mobile application first thing you need to learn is page events, their sequence, order and how to properly use them. Even more, you need to understand when they will trigger, at wait point and how to delegate them. Last year I covered almost everything related to jQuery Mobile page events, now time has come to do it all over again.
Up to this point of jQuery Mobile 1.4 page events worked on per page basis, basically you would bind a page event to a certain page div and wait for it to trigger. Page event sequence order looked like this:
This way of page event handling is now deprecated (Note: because of community outcry deprecation process was moved to jQuery Mobile 1.5), according to jQuery Mobile developers, old way of page handling was just a temporarily solution.
When jQuery Mobile 1.4 rolled out it brought us some major changes to page event handling, mainly pagecontainer widget. Almost every page event was renamed and incorporated into mentioned widget, some like pagebeforecreate, pagecreate were left intact. New page event sequence order looks like this:
New page event sequence order
- mobileinit – The very first event that fires – even before .ready(), it fires after loading core jQuery and before loading core jQuery Mobile.
- pagebeforecreate – First event to occur before page is loaded into the DOM. This is an excellent event if you want to add additional content to your DOM. This is because at this point DOM content is still intact and jQuery Mobile is waiting to enhance page markup.
- pagecreate – Second event to occur if page is still not loaded into the DOM. It marks that page is loaded into the DOM and can also be used in same fashion just like pagebeforecreate. This event is replacement for pageinit event which no longer exists (currently is deprecated).
- pagecontainerbeforehide – This is excellent event if you want to do something before page is hidden or before next page can be shown.
- pagecontainerhide – Unlike previous one this page even will trigger after pages is hidden, used page template will determine is this page completely removed or just marked not-active (in case of multi-HTMl template this page is removed from DOM, unless it is marked for cashing).
- pagecontainerbeforeshow – This event will trigger just before page is shown, it is also an excellent time to bind other events, like click etc.
- pageremove – At this point page is shown. This event should be used for jQuery plugins that require precise page height cause only at this point page height can be calculated correctly.
- pagecontainerremove – This event is triggered when page is about to be removed from the DOM, it will work only in case of multi-HTML template when page cashing is turned off.
- pagecontainerbeforeload – This event will trigger when pageload function is used but before page is successfully loaded.
- pagecontainerload – Just like previous event, but this one will trigger only on a successful page load.
- pagebeforechange – This page event will trigger when changePagefunction is triggered but before page transition process. It will trigger even during normal transition because changePagefunction is called automatically each time page is about to be changed (I just wanted to clarify this, changePage don’t need to be executed manually for this event to work). Must be bound to the document object, it will not work bound to a page div.
- pagechange – Just like previous one, but this one will trigger on successful page change status.
- pagecontainerbeforetransition – Alternative version of pagebeforechange event, you should switch to this one over time because I think pagebeforechange is also going to be removed
- pagecontainertransition – Alternative version of pagechange event, you should switch to this one over time because I think pagechange is also going to be removed