jQuery Mobile - 多个弹出窗口问题答案

【问题标题】：jQuery Mobile - Multiple popups issuejQuery Mobile - 多个弹出窗口问题
【发布时间】：2013-02-13 10:50:57
【问题描述】：

我的 jQuery Mobile 网站有问题，我有 3 个单独的页面（在一个 index.html 文件中），所有页面都在成功事件时加载自己的弹出窗口，然后我通过 jQuery 加载弹出窗口，例如：

$( "#myPopupDiv" ).popup( "open" );

这很好用，但是一旦用户访问了一个页面并打开了它的弹出窗口，当访问后续页面时，这些页面上的弹出窗口就不会触发（但是该页面上的弹出窗口在会话期间有效仍然），但是所有代码都可以在页面上运行，并且 Chrome 开发工具中没有控制台错误。

我没有任何重复的 ID，我尝试在 console.log 中放置代码应该触发以打开弹出窗口的位置，这可以正常工作，似乎绕过了打开弹出窗口的代码。

以前有人遇到过这个问题吗？

提前致谢。

简化代码示例

<!-- PAGE 1 -->
<div data-role="page" id="page-1">
    <div data-role="content">
        <!-- BUTTON: loadPopup-1 -->
        <div id="popup-1" data-role="popup">
        <!-- Popup contents -->
        </div><!-- /popup -->
    </div><!-- /content -->
</div><!-- /page -->

<!-- PAGE 2 -->
<div data-role="page" id="page-2">
    <div data-role="content">
        <!-- BUTTON: loadPopup-2 -->
        <div id="popup-2" data-role="popup">
        <!-- Popup contents -->
        </div><!-- /popup -->
    </div><!-- /content -->
</div><!-- /page -->

<!-- JS -->
function loadPopup-1() {
    $( "#popup-1" ).popup( "open" );
}

function loadPopup-2() {
    $( "#popup-2" ).popup( "open" );
}

因此，如果用户选择第 1 页并打开其弹出窗口，该弹出窗口将继续工作，但第 2 页上的弹出窗口不会，反之亦然。

【问题讨论】：

需要看一些代码......
更新了一些代码
你什么时候调用loadPopup-*()函数？
我已经在这个例子中简化了它，但它是实际弹出窗口上方的行，我在 cmets 中输入了 BUTTON: loadPopup-* 然后运行 JS 代码
据我所知，如果页面在 DOM 中，弹出窗口和对话框将触发一次。从 DOM 中删除 .remove() 页面可以解决问题，我正在处理类似的问题。

标签： jquery jquery-mobile popup

【解决方案1】：

似乎不可能一次打开多个 JQM 弹出窗口。

来自文档：注意：不允许链接弹出窗口该框架目前不支持弹出窗口的链接，因此无法嵌入从一个弹出窗口到另一个弹出窗口的链接。弹出窗口中所有带有 data-rel="popup" 的链接根本不会做任何事情。

这也意味着自定义选择菜单在弹出窗口中不起作用，因为它们本身是使用弹出窗口实现的。如果您在弹出窗口中放置一个选择菜单，它将呈现为原生选择菜单，即使您指定 data-native-menu="false"。

【讨论】：

【解决方案2】：

您应该显示更多代码，以便我们了解问题...弹出功能的触发器是什么？在那之前，我建议你做点别的：

创建一个在活动页面上创建通用弹出窗口的函数，然后将其打开...

示例代码：

function ShowPopUp(PopupText){

   // check if popup element already exists
   if($("#PopUp").length > 0)
      $("#PopUp").remove();

   // get active (current) page ID
   var id = $.mobile.activePage.attr("id");

   // add popup element to the active page
   $("#" + id).append("<div data-role='popup' id='PopUp' class='ui-content' data-position-to='window' data-overlay-theme='a'></div>");

   // add your text to the popup
   $("#PopUp").html(PopupText);

   // "refresh" the page with new popup elements
   $("#" + id ).trigger('create');

   // open the popup
   $("#PopUp").popup("open");

}

【讨论】：

【解决方案3】：

试试 https://github.com/serbanghita/jQM-dynamic-popup - 我从 2012 年开始就在生产中使用它。

在你的函数中封装$.dynamic_popup(' ... HTML code ... ');。您可以触发任意数量的 jQuery Mobile 弹出窗口。

【讨论】：