title: jquery mobile pagecontainershow events binding correct way
body: <p>i have two pages in one file like so:</p>
  
  <pre><code>    &lt;section id="firstpage" data-role="page"&gt;
      &lt;header data-role="header"&gt;
        &lt;h1&gt;Event Example&lt;/h1&gt;
      &lt;/header&gt;
      &lt;div class="ui-content"&gt;
        &lt;p&gt;This is page 1&lt;a href="#secondpage"&gt;click here&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section id="secondpage" data-role="page"&gt;
      &lt;header data-role="header"&gt;
        &lt;h1&gt;Event Example&lt;/h1&gt;
      &lt;/header&gt;
      &lt;div class="ui-content"&gt;
        &lt;p&gt;This is page2&lt;/p&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>basically i want a pagecontainershow event to fire on secondpage show
  what i want to do is that when the "secondpage" loads i want to perform run some initialization code. the problem i face is that the second page isnt active in the dom it is fetched by ajax so how do i bind events on the show of the second page</p>
  
  <p>what i did is this</p>
  
  <pre><code>$( document ).on( "pagecontainershow", function ( event, ui ) {
  var activePage = $.mobile.pageContainer.pagecontainer( "getActivePage" );
    if(activePage[0].id=="secondpage"){
     //do the initialization for second page
    }
    });
  </code></pre>
  
  <p><strong>the pagecontainershow show event is what i want but it fires for every page how can i bind it to fire on secondpage show only</strong></p>