我有什么
我正在使用 jQuery Mobile 1.4.4。我在每个标题上添加了一个齿轮按钮，它将打开一个小弹出窗口以在“注销”和“帐户设置”之间导航。
我想要发生的事情
我希望这个弹出窗口显示在它被点击的每个页面上，对每个页面使用相同的代码
问题
在主页上(称之为页面 A)我有这个齿轮按钮。当我单击它时，弹出窗口将正常显示。然后我点击帐户设置(称之为页面 B)。页面 B 加载后，齿轮也在那里，但不会像页面 A 那样打开弹出窗口。如果我刷新页面 B，齿轮弹出窗口将起作用，但一旦我导航回页面 A(通过主页按钮)，齿轮将不再起作用，直到我刷新。
所描述场景情况的视频:http://screencast.com/t/34ZrYyc4Rp2T
代码
只是标题和弹出 html(两个页面上相同)
<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>
我认为正在发生的事情
我读到这个问题可能是因为弹出窗口的 ID 相同？这没有意义，因为它们是两个不同的页面。
弹出窗口也可能填充在 <div role="page"> 中
lapieuvre 的问题(对手头的类似问题的答复)这里是完全相同的场景:https://forum.jquery.com/topic/popup-open-not-working-after-navigate-next-page
非常感谢任何反馈
最佳答案
总结答案:
因为弹窗的ID是一样的。如果您了解 jQuery Mobile 的工作方式，它确实有意义，它通过 AJAX 获取 HTML 部分，形成一种单页应用程序。
最好使用 AJAX，这就是整个想法，只需更改 ID 最好有一个前缀，以便您识别其父页面，这就是要走的路。干杯!
关于javascript - jQuery Mobile 弹出窗口不会在页面导航后显示，仅在硬刷新或返回同一页面后显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26241843/