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

Posted 2023-05-09

技术标签:

【中文标题】jQuery Mobile 弹出页面导航后不显示，仅在硬刷新或返回同一页面后显示【英文标题】：jQuery Mobile popup won't show after page navigation, only shows after hard refresh, or returning to same page 【发布时间】：2014-12-02 05:23:27 【问题描述】：

我有什么

我正在使用 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 部分，从而形成单页应用程序。 @SameerShemna 所以要么使用data-ajax=false 设置锚标签，要么更改每个弹出窗口的ID。最好使用 AJAX 这就是整个想法，只需更改 ID 最好有一个前缀让您识别其父页面，这就是要走的路。干杯！谢谢@SameerShemna，如果您将此作为答案发布，我会接受。 【参考方案1】：

总结答案：

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

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

【讨论】：

【参考方案2】：

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

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

【讨论】：

【参考方案3】：

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

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

【讨论】：