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

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

我正在使用弹出窗口浏览应用程序。事件顺序如下： 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');
});

因此，我可以从第1页转到第2页并弹出一个窗口，但即使我可以转到第3页，introPanel3也不会弹出

我原以为这可能是我正在收听的事件（例如pagecontainershow），但我都试过了。其中一些在第2页上没有弹出窗口，因为页面需要在调用弹出窗口（“打开”）之前完成加载

我不明白为什么它适用于第一个转换和弹出窗口，而不适用于下一个（以及随后的转换和弹出窗口，总共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');
});

---

它不起作用（

当

pagecontainershow

第一次启动时，它将打开

#introPanel2

。然后，关闭该弹出窗口并绑定另一个

pagecontainershow

以打开另一个弹出窗口

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

或者，在活动页面中找到弹出窗口并打开它

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

---

当

pagecontainershow

第一次启动时，它将打开

#introPanel2

。然后，关闭该弹出窗口并绑定另一个

pagecontainershow

以打开另一个弹出窗口

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

或者，在活动页面中找到弹出窗口并打开它

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

---

当

pagecontainershow

第一次启动时，它将打开

#introPanel2

。然后，关闭该弹出窗口并绑定另一个

pagecontainershow

以打开另一个弹出窗口

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

或者，在活动页面中找到弹出窗口并打开它

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

---

当

pagecontainershow

第一次启动时，它将打开

#introPanel2

。然后，关闭该弹出窗口并绑定另一个

pagecontainershow

以打开另一个弹出窗口

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

或者，在活动页面中找到弹出窗口并打开它

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

---

---

您可能只需要在单击处理程序之外定义一次pagecontainershow事件，然后检查ui.toPage/ui.prevPage以决定显示哪个弹出窗口。这也有助于查看您的HTML。与页面相关的弹出面板在哪里，等等？可能是一把小提琴？因为每当

pagecontainershow

触发时，它都会打开$（“#introPanel2”）。弹出（“打开”）；

函数（e，ui）

您忘记了

e，ui

。我已经添加了它。仍然是一样的。您可能只需要在单击处理程序之外定义一次pagecontainershow事件，然后检查ui.toPage/ui.prevPage以决定显示哪个弹出窗口。另外，查看HTML也会有帮助。与页面相关的弹出面板在哪里？可能是小提琴？b因为每当

pagecontainershow

触发时，它将打开

$（“#introPanel2”）。弹出（“打开”）；

函数（e，ui）

您忘记了

e，ui

。我已经添加了它。仍然是一样的。您可能只需要在单击处理程序之外定义一次pagecontainershow事件，然后检查ui.toPage/ui.prevPage以决定显示哪个弹出窗口。另外，查看HTML也会有帮助。与页面相关的弹出面板在哪里？可能是小提琴？b因为每当

pagecontainershow

触发时，它将打开

$（“#introPanel2”）。弹出（“打开”）；

函数（e，ui）

您忘记了

e，ui

。我已经添加了它。仍然是一样的。您可能只需要在单击处理程序之外定义一次pagecontainershow事件，然后检查ui.toPage/ui.prevPage以决定显示哪个弹出窗口。另外，查看HTML也会有帮助。与页面相关的弹出面板在哪里？可能是小提琴？b因为每当

pagecontainershow

触发时，它将打开

$（“#introPanel2”）。弹出（“打开”）；

函数（e，ui）

你忘记了

e，ui

。我已经添加了它。还是一样。你能告诉我如何使用你的第二个解决方案和我的代码来完成吗？我是否将#introPanel2替换为.ui popup？因为我已经尝试过了，但它不起作用。如果你想指定一个弹出窗口，你需要检查页面ID。第二个解决方案更容易，因为它可以运行ns带有活动页面的弹出窗口。如果您有许多弹出窗口，您可以针对带有特定类的特定弹出窗口，例如，

$（“.ui popup.foo”，ui.toPage）。弹出窗口（“open”）；

这将在活动页面中打开带有类

foo

的弹出窗口，而不管当前显示的页面是@Subject