Question

I’m using a bunch of plugins in a Jquery Mobile site and am looking for the best way to “clean up” once I’m leaving a page, which stays in the DOM.

Question is, should I try to unbind/off/undelegate plugin bindings and re-initialize when the page is pulled back into view, or should I leave everything running “in the background” while the user is on another page?

Either way, what would be the best way to do this, if I’m setting up plugins like so:

 // example using flexslider plugin
 $('div:jqmData(role="page").basePage').on('pagecreate.flexslider', function() {    

      // make sure this fires only once when pagecreates fires more often
      if ( $('.flexslider').length > 0 && $('.flexslider').jqmData('bound') != true ) {
          // lock           
          $('.flexslider').jqmData('bound',true);
          $('.flexslider').flexslider({ 
                    animation: "slide", 
                    controlsContainer: $(".flex-container")
                    }); 
          } 
      });

Question:
Say this is my Jquery Mobile anchor-page (always stays in the DOM), should I off when the user leaves the page and re-init on re-load or keep the slider running in the background?

Whats the best practive here?

Answer 1

When you leave a page that was brought into the DOM via AJAX, jQuery Mobile will automatically remove the page from the DOM, including it’s descendants and all of their event-handlers/data.

For animated page transitions to work, the pages you’re transitioning
from and to both need to be in the DOM. However, keeping old pages in
the DOM quickly fills the browser’s memory, and can cause some mobile
browsers to slow down or even crash.

jQuery Mobile therefore has a simple mechanism to keep the DOM tidy.
Whenever it loads a page via Ajax, jQuery Mobile flags the page to be
removed from the DOM when you navigate away from it later
(technically, on the pagehide event). If you revisit a removed page,
the browser may be able to retrieve the page’s HTML file from its
cache. If not, it refetches the file from the server. (In the case of
nested list views, jQuery Mobile removes all the pages that make up
the nested list once you navigate to a page that’s not part of the
list.)

Pages inside a multi-page template aren’t affected by this feature at
all – jQuery Mobile only removes pages loaded via Ajax.

Source: http://jquerymobile.com/demos/1.1.0/docs/pages/page-cache.html

.

Internally jQuery Mobile uses .remove():

Similar to .empty(), the .remove() method takes elements out of the
DOM. Use .remove() when you want to remove the element itself, as well
as everything inside it. In addition to the elements themselves, all
bound events and jQuery data associated with the elements are removed.

Source: http://api.jquery.com/remove/