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），但我已经尝试过了。其中一些不会在第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');
});

它不起作用。：（

Answer 1

当pagecontainershow第一次触发时，它会打开#introPanel2。然后，关闭弹出窗口并绑定另一个pagecontainershow以打开另一个弹出窗口 #introPanel3。

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

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

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

<强> Demo

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

1 个答案: