jquery-mobile - 页面加载时的 jQuery Mobile 对话框

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:我更改了附加页面显示监听器的选择器。我没有选择 data-role="page"的位置，而是通过它们的 id 选择特定页面。然后我重新尝试了我在前两次更新中描述的两种方法，但它仍然无法正常工作。首先，当我尝试使用 allowSamePageTransition 刷新初始页面时，似乎 pageshow 触发了两次，因为对话框启动了两次。然后，当我尝试使用空白的初始页面，然后在附加 pageshow 监听器后立即进行重定向时，没有任何 react 并且该对话框永远不会出现。如果我导航到任何其他页面，对话框会按预期工作。我不明白为什么第一页这么麻烦。

Answer 1

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

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

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

update

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

Image / diagram source: http://bradbroulik.blogspot.co.nz/2011/12/jquery-mobile-events-diagram.html