Question

我有什么

我正在使用jQuery Mobile 1.4.4。我已经在每个标题上添加了一个齿轮按钮，它会打开一个小弹出窗口，以便在“退出”按钮之间导航。和＆＃39;帐户设置＆＃39;。

我想要发生什么

我希望这个弹出窗口显示在每个被点击的页面上，每个页面都使用相同的代码

问题

在主页上（称之为第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

非常感谢任何反馈

Answer 1

总结答案：

因为弹出窗口的ID是相同的。如果您了解jQuery Mobile的工作方式，它通过AJAX获取HTML部分，使其成为单页应用程序，这是有意义的。

最好使用整个想法的AJAX，只需更改ID，最好有一个前缀，以便您识别其父页面，这就是最佳选择。干杯!

Answer 2

当我发现这篇文章时，我正在研究同样的问题。对我有用的是将弹出式div放在外部工具栏中：http://demos.jquerymobile.com/1.4.4/toolbar-external/

＆＃34;在Ajax导航期间，不在页面内的工具栏不会被拉入DOM。＆＃34;这样你就不会有多个具有相同ID的div。

Answer 3

感谢OP发布此帖，因为这个问题让我在几天内陷入困境。实际上我的问题略有不同，因为同一页面显示了这种行为，因此与页面相关的ID无法解决问题。

然而，与第一个响应者一样，我使用随机数作为弹出ID的一部分，它以类似的方式解决了问题。

jQuery Mobile弹出窗口不会在页面导航后显示，仅在硬刷新后显示，或返回到同一页面

3 个答案: