页面转换后在 jQuery Mobile 1.4.3 中打开弹出窗口

Question

我知道这会被一次又一次地问到，我已经用其他答案部分解决了这个问题。不过我现在卡住了。

我正在使用弹出窗口来浏览应用程序。事件顺序为： 1. 按“下一步”按钮。 2.关闭弹窗 3.换页 4.打开新的弹窗

您不能链接弹出窗口，所以我使用 afterclose。它适用于第一次转换，但之后我没有弹出窗口。此代码中的 console.log 给出了输出。

$('#introPanel1Next').click(function(){
  $('#introPanel1').popup({
    afterclose: function(){
      $(":mobile-pagecontainer").pagecontainer("change", "#page2", {
        transition: "slide"
      }).on( "pagecontainershow", function() {
        $('#introPanel2').popup('open');
      });
    }
  }).popup('close');
});

$('#introPanel2Next').click(function(){
  $('#introPanel2').popup({
    afterclose: function(){
      $(":mobile-pagecontainer").pagecontainer("change", "#page3", {
        transition: "slide"
    }).on( "pagecontainershow", function() {
        $('#introPanel3').popup('open');
      });
    }
  }).popup('close');
});

所以我可以从 page1 转到 page2 并弹出一个窗口，但即使我可以转到 page3 introPanel3 也不会弹出。

我认为这可能是我正在监听的事件（例如 pagecontainershow），但我已经全部尝试过了。其中一些不会在 page2 上弹出窗口，因为页面需要在调用 popup("open") 之前完成加载。

我不明白为什么它适用于第一个转换和弹出窗口，但不适用于下一个（因此后续的，总共 5 个）。

---

关于下面的答案，我试过这个：

$('#introPanel1Next').click(function(){
  $('#introPanel1').popup({
    afterclose: function(){
      $(":mobile-pagecontainer").pagecontainer("change", "#page2", {
        transition: "slide"
      }).on( "pagecontainershow", function() {
        $('#introPanel2', ui.toPage).popup("open");          
      });
    }
  }).popup('close');
});

它不起作用。 :(

Answer 1

当pagecontainershow 第一次触发时，它将打开#introPanel2。之后，您关闭该 popup 并绑定另一个 pagecontainershow 以打开另一个 popup #introPanel3。

移动到第 3 页时，pagecontainershow 将触发，但它会尝试打开 #introPanel2，然后打开 #introPanel3。结果，没有一个是打开的。

您需要检查哪个页面处于活动状态以确定要打开哪个弹出窗口。例如

$(document).on("pagecontainershow", function (e, ui) {
   var activePage = ui.toPage; /* as of jQM 1.4.3 */
   var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"); /* 1.4.2 and before */

   if (activePage[0].id == "page1") {
      $("#popup1").popup("open")
   }
});

或者，只需在活动页面中找到 popup 并打开它。

$(document).on("pagecontainershow", function (e, ui) {
   $(".ui-popup", ui.toPage).popup("open");
});

Demo