jQuery移动-多个弹出窗口问题

Question

我的jQuery移动站点有一个问题，我有3个单独的页面(在一个index.html文件中)，所有这些页面都在一个成功的事件上加载自己的弹出，然后通过jQuery加载弹出：

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

这很好，但是一旦用户访问了一个页面并打开了它的弹出窗口，当访问后续的页面时，这些页面上的弹出窗口就不会启动了(尽管该页面上的弹出窗口在会话期间仍然有效)，但是所有的代码都在页面上工作，Chrome dev工具中没有控制台错误。

我没有任何重复的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页上的弹出窗口将继续工作，反之亦然。

Answer 1

一次打开一个以上的JQM似乎是不可能的。

来自doco:注意:弹出窗口的链接不允许，框架目前不支持弹出窗口的链接，因此不可能嵌入从一个弹出窗口到另一个弹出窗口的链接。在弹出窗口中使用数据-rel=“弹出”的所有链接都不会起任何作用。

这也意味着自定义选择菜单将无法在弹出窗口中工作，因为它们本身是使用弹出窗口实现的。如果将选择菜单放置在弹出窗口中，则它将呈现为本机选择菜单，即使您指定了数据本机菜单=“false”。

Answer 2

您应该显示更多的代码，这样我们才能理解issue...what是弹出函数的触发器吗？在那之前，我建议你做点别的：

创建一个函数，在活动页面上创建一个通用弹出，然后打开它.

样本代码：

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");

}

Answer 3

试试https://github.com/serbanghita/jQM-dynamic-popup --我已经从2012年开始在生产中使用这个了。

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