Best way of initialize multi-page jQuery Mobile

Question

This is a bit confusing so I\'d like to know what the correct way is nowadays, for initialize your multi-page app.

// include multiple JS files
         


        

Answer 1

First of all, you need to know the difference between jQuery Mobile 1.4 events; the ones that emit once on page and the ones emit continuously on pagecontainer.

To add listeners, e.g. click, tap, change...etc. Wrap them and their custom function in pagecreate. That event fires once per page, so you need to specify #pageID in order to add those listeners to that page only. If you fail to specify a page, those listeners will be added again and again whenever pagecreate is emitted on a page.

You can as well use pagecreate to manipulate DOM and inject elements dynamically.

$(document).on("pagecreate", "#pageID", function () {
   <!-- listeners -->
});

To manipulate DOM whenever page is shown/hidden, you need to listen to pagecontainer events. Those events fire continuously on pagecontainer, thus, it isn't a good idea to add listeners here. Use them to add, remove, hide, show, reset...etc, however, the new pagecontainer events can't be attached to a specific #pageID. You'll need to check which page is active or which page is going to be hidden.

$(document).on("pagecontainershow", function () {
  var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),
      activePageID = activePage[0].id;

  if (activePageId == "pageA") {
    $(elm1).hide();
    $(elm2).show();
  }
});

---

Update

Usage of Self-Executing Functions $(function () { }); is limited to specific cases in jQM. They are used to initialize widgets that can be used externally, i.e. Panels, Toolbars and Popup.

Code wrapped in $(function () { }); will be executed as soon as it is loaded.