title: jQuery Mobile popup won't show after page navigation, only shows after hard refresh, or returning to same page
body: <p><strong>What I have</strong></p>
  
  <p>I am using jQuery Mobile 1.4.4. I've added a gear button on each header that will open a small popup to navigate among 'Logout' and 'Account Settings'.</p>
  
  <p><strong>What I want to happen</strong></p>
  
  <p>I want this popup to show up on every page that it is clicked on, using the same code for each page</p>
  
  <p><strong>The problem</strong></p>
  
  <p>On the home page (call it page A) I have this gear button. When I click on it, the popup will appear just fine. I then click on account settings (call it page B). Once page B has loaded, the gear is also there, but does not open the popup like page A does. If I <em>refresh</em> page B, the gear popup will work, but once I navigate back to page A (via the home button) the gear no longer works until I refresh. </p>
  
  <p>Video of the described scenario situation: <a href="http://screencast.com/t/34ZrYyc4Rp2T" rel="nofollow">http://screencast.com/t/34ZrYyc4Rp2T</a></p>
  
  <p><strong>Code</strong></p>
  
  <p>Just the header and popup html (same on both pages)</p>
  
  <pre><code>&lt;body&gt;
   &lt;table id="top" border=0 &gt;
   &lt;colgroup&gt;
      &lt;col style="width: 33%"/&gt;
      &lt;col style="width: 33%"/&gt;
      &lt;col style="width: 33%"/&gt;
   &lt;/colgroup&gt;
   &lt;tr&gt;
       &lt;td align="left"&gt;
           &lt;a href="javascript:window.history.back();" data-role="button" data-icon="back" data-iconpos="notext" data-inline="true"&gt;Back&lt;/a&gt;
       &lt;/td&gt;
       &lt;td id="tdTitle" align="middle" style="padding-top:10px;"&gt;
           &lt;h2&gt;Home&lt;/h2&gt;
       &lt;/td&gt;
       &lt;td align="right"&gt;
           &lt;a href="Home.php" data-role="button" data-icon="home" data-iconpos="notext" data-inline="true"&gt;Home&lt;/a&gt;
           &lt;a href='#settingsPopup' data-rel='popup' data-transition='pop' data-role="button" data-icon="gear" data-iconpos="notext" data-inline="true"&gt;Settings&lt;/a&gt;
       &lt;/td&gt;
  
   &lt;/tr&gt;
  &lt;/table&gt;  
   &lt;div data-role='popup' id='settingsPopup' &gt;
  &lt;ul data-role='listview' data-inset='true' style='min-width:210px;'&gt;
      &lt;li data-role='list-divider'&gt;
          Settings                
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href='AccountSettings.php'&gt;Account Settings&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href='Logout.php'&gt;Logout&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>What I think is happening</strong></p>
  
  <p>I've read that this issue may be because the ID of the popups are the same? Which doesn't make sense because they are two different pages.</p>
  
  <p>It could also be the case that the popup is populated within the <code>&lt;div role="page"&gt;</code> </p>
  
  <p>lapieuvre's issue (in reply to the similar issue at hand) here is the exact same scenario: <a href="https://forum.jquery.com/topic/popup-open-not-working-after-navigate-next-page" rel="nofollow">https://forum.jquery.com/topic/popup-open-not-working-after-navigate-next-page</a></p>
  
  <p><strong>Any feedback is greatly appreciated</strong></p>