页面加载时的jQuery Mobile Dialog

Question

使用我的第一个jQuery Mobile应用程序。有一个localStorage值必须在整个应用程序中有一个值，所以我点击了pageshow事件来检查这个值：

$(function () {
$("div[data-role='page']").on("pageshow", function (event, ui) {
    if (getValue() == null) {
        // show the dialog
        $.mobile.changePage("#dialog");
    }
});
});

这在浏览各个页面时有效，但在第一页加载时永远不会被调用。我试图在我添加pageshow监听器的部分下面再次复制上面的If语句，但它具有显示对话框，隐藏它，然后再次显示它的效果。

在第一页上，似乎打开对话框正在触发pageshow（这很奇怪，考虑到我的选择器），这又会触发另一个对话框。有没有人有关如何解决这个问题的建议，或者更好的方式来解决这个问题？

更新＃1：我试过

$.mobile.changePage( "#mypage", { allowSamePageTransition: true, transition: "none" } );

但它与原始问题具有相同的效果，它启动对话框，然后隐藏它，然后再次显示它。似乎以某种方式启动对话框正在触发pageshow事件，即使我试图在我的选择器中过滤掉它。请注意，如果您删除转换：“无”选项，则该对话框根本不会显示。

更新＃2：我还尝试创建一个空白的初始页面，然后进行简单的页面转换

$.mobile.changePage("#mypage");

但它仍然没有正确的行为。在这种情况下，它确实将我带到下一页，但是不会触发pageshow事件，因为我的对话框没有出现。我知道它没有触发，因为我可以从导航菜单中选择另一个页面并且对话框确实出现了。

更新＃3：我更改了选择器，我附加了pageshow侦听器。我没有选择data-role =“page”的位置，而是按照ID选择特定页面。然后我重新尝试了我在前两次更新中描述的两种方法，但它仍然无法正常工作。首先，当我尝试使用allowSamePageTransition刷新初始页面时，似乎pageshow会触发两次，因为对话框会启动两次。然后，当我尝试使用空白的初始页面，然后在我附加pageshow监听器后立即进行重定向时，没有任何反应，对话框永远不会出现。如果我导航到任何其他页面，该对话框将按预期工作。我不明白为什么第一页这么麻烦。

Answer 1

设置显示对话框的时间间隔，而不是在显示页面后调用它。

$(document).on('pageshow', '#myPage' ,function () {
 if (getValue() == null) {
  setTimeout(function () {
   $.mobile.changePage('#dialog');
  }, 100); // delay above zero
 }
});

这样，对话框将在pageshow事件上弹出，并且只会弹出一次。

  

<强>更新

我在这个blog上找到了这个有趣的jQueryMobile事件图。它解释了为什么在多页结构的情况下，对话框或弹出窗口在第一页上被触发两次而在其余页面上没有被触发。一旦页面准备好进入DOM，它就会在pageshow上再次出现。设置超时会阻止对话框在pageinit上触发，因此会在触发pageshow之前跳过该事件。

  

图片/图表来源：http://bradbroulik.blogspot.co.nz/2011/12/jquery-mobile-events-diagram.html

Answer 2

最有可能的是，在第一页上，当您的代码执行时，该事件已被触发。这解释了为什么你只在第一页上得到任何东西。

关于你的第二点，这是正常的，因为，changePage会将页面“更改”到对话框，一旦你关闭对话框，它将返回到你的上一页。因此，if执行了2次。

我的建议是，您第一次进入第一页时，可以在注册pageshow事件的回调后立即重新转换到同一页面。

Answer 3

我使用了“pagecreate”，这似乎解决了我的问题（到目前为止......）

$(document).on('pagecreate', "#page-formyID", function () {

//whatever

});