What I have
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'.
What I want to happen
I want this popup to show up on every page that it is clicked on, using the same code for each page
The problem
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 refresh 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.
Video of the described scenario situation: http://screencast.com/t/34ZrYyc4Rp2T
Code
Just the header and popup html (same on both pages)
<body>
<table id="top" border=0 >
<colgroup>
<col style="width: 33%"/>
<col style="width: 33%"/>
<col style="width: 33%"/>
</colgroup>
<tr>
<td align="left">
<a href="javascript:window.history.back();" data-role="button" data-icon="back" data-iconpos="notext" data-inline="true">Back</a>
</td>
<td id="tdTitle" align="middle" style="padding-top:10px;">
<h2>Home</h2>
</td>
<td align="right">
<a href="Home.php" data-role="button" data-icon="home" data-iconpos="notext" data-inline="true">Home</a>
<a href='#settingsPopup' data-rel='popup' data-transition='pop' data-role="button" data-icon="gear" data-iconpos="notext" data-inline="true">Settings</a>
</td>
</tr>
</table>
<div data-role='popup' id='settingsPopup' >
<ul data-role='listview' data-inset='true' style='min-width:210px;'>
<li data-role='list-divider'>
Settings
</li>
<li>
<a href='AccountSettings.php'>Account Settings</a>
</li>
<li>
<a href='Logout.php'>Logout</a>
</li>
</ul>
</div>
What I think is happening
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.
It could also be the case that the popup is populated within the <div role="page">
lapieuvre's issue (in reply to the similar issue at hand) here is the exact same scenario: https://forum.jquery.com/topic/popup-open-not-working-after-navigate-next-page
Any feedback is greatly appreciated
Summing up the answer:
Because the ID of the popups are the same. It does make sense if you understand the way jQuery Mobile works, it fetches the HTML partials via AJAX, making sort of a Single Page Application.
It is best to use AJAX thats the whole idea, just change the IDs preferably to have a prefix for you to identify its parent page, thats the way to go. Cheers!