页面加载时的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事件,即使我试图在我的选择器中过滤掉它.请注意,如果删除转换:"none"选项,则根本不显示该对话框.

更新#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事件上弹出一次.

更新

我在这个博客上发现了这个有趣的jQueryMobile事件图.它解释了为什么在多页结构的情况下,对话框或弹出窗口在第一页上被触发两次而在其余页面上没有被触发.一旦页面准备好进入DOM并且再次打开时,它似乎会触发pageshow.设置超时会阻止对话框触发pageinit,因此会跳过该事件直到pageshow触发为止.

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