title: jquery mobile, pageinit, pagecreate, and redundancy
body: <p>thanks in advance for taking a look at this jQuery Mobile (version 1.1.0) question.</p>
  
  <p>My first question is: What function do you use to run on every page load and every ajax page call (they seem to be be 2 separate beasts)? I want them to be run every time.</p>
  
  <pre><code>$(document).bind('pageinit',function(){
      console.log('Does this work for you?');
  });
  </code></pre>
  
  <p>I've got several separated jQuery-Mobile powered HTML pages using jQuery code for various functionality. Some of this functionality includes a touch-based slider (royalSlider) that happens on a couple pages, some of the code sniffs whether certain elements exist (such as a fixed subheader or footer) to adjust margins for the page so the main content is obstructed by overlapping elements, and other js is a script that hits every element with a specific class that triggers an AJAX call for every image. </p>
  
  <p>Question is: do I need an live pageinit function called for each ID of every page? Do I need to use pageinit AND pagecreate for every page?</p>
  
  <p>For example, let's say I have a function called face() that finds whether or not there's a footer so I can add a class to .container to add a bottom margin so main content is obstructed from view.</p>
  
  <p>Theoretically, can't I run a function like this that hits every active page upon landing on the page or pulling in the page via AJAX ?</p>
  
  <pre><code>$('[data-role="page"].ui-page-active').live('pageinit', function(){ 
      face();
  });
  </code></pre>
  
  <p><em><strong>not:</em></strong></p>
  
  <pre><code>$("#brand-grid,#product-grid,#main-grid,#trends").live('pageinit', function() {
      face();
  });
  </code></pre>
  
  <p>What I find is that it works when I land on a page that needs the offset at first, but when you go to another page it no longer works. Is this because there are 2 div[data-role="page"] in the DOM and my command is too ambiguous? Or is it because pageinit only works for the original page and not AJAX'd content?</p>
  
  <p>My next question: How do you destroy a page after you've navigated from it? I don't want the tablet to be running 2 instances of the royalSlider if I can help it.</p>
  
  <p>Here's my attempt: </p>
  
  <pre><code>$('[data-role="page"].ui-page-active').live('pageinit', function(){
       $('[data-role="page"]:not(.ui-page-active)').live('pageremove');
  });
  </code></pre>
  
  <p>Any insight you have would be great, I just want to avoid memory leaks and slow performance. JQM has been pretty awesome to develop with aside from these temperamental issues. Thank you.</p>