1

我有的

我正在使用 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

非常感谢任何反馈

4

3 回答 3

2

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

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

于 2014-10-23T16:30:36.093 回答
2

总结答案：

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

最好使用 AJAX，这就是整个想法，只需更改 ID 最好有一个前缀供您识别其父页面，这就是要走的路。干杯!

于 2014-10-07T19:04:18.663 回答
1

感谢OP发布这个，因为这个问题在几天内让我很困惑。实际上我的问题略有不同，因为同一个页面显示了这种行为，所以与页面相关的 ID 并不能解决问题。

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

于 2018-06-10T19:35:16.210 回答