Question

我正在使用jQuery Mobile 1.4.5并且我创建了两个页面：

test1.html：

<body>
    <div data-role="page" id="test1">

        <div data-role="header">
            <h1>Test1 page</h1>
        </div><!-- /header -->

        <div data-role="content">
                Test1 page
                <a href="test2.html">foo</a>
        </div><!-- /content -->

        <div data-role="footer">
            <h4>Footer</h4>
        </div><!-- /footer -->
        <script>
            $(document).off("pagecontainershow").on("pagecontainershow", function () {
                var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");

                var activePageId = activePage[0].id;
                switch (activePageId) {
                    case 'test2':
                        alert('test2 page from test1 page js');
                        break;
                    case 'test1':
                        alert('test1 page from test1 page js');
                        break;
                    default:
                }
            });
        </script>
    </div>
</body>

test2.html：

<body>
    <div data-role="page" id="test2">

        <div data-role="header">
            <h1>Test2 page</h1>
        </div><!-- /header -->

        <div data-role="content">
                Test2 page
                <a href="test1.html">foo</a>
        </div><!-- /content -->

        <div data-role="footer">
            <h4>Footer</h4>
        </div><!-- /footer -->
        <script>
            $(document).off("pagecontainershow").on("pagecontainershow", function () {
                var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");

                var activePageId = activePage[0].id;
                switch (activePageId) {
                    case 'test2':
                        alert('test2 page from test2 page js');
                        break;
                    case 'test1':
                        alert('test1 page from test2 page js');
                        break;
                    default:
                }
            });
        </script>
    </div>
</body>

当我加载test1.html时，我收到提醒读取"test1 page from test1 page js"，告诉我加载页面新鲜会触发pagecontainershow事件。到现在为止还挺好。现在，我点击链接转到test2.html，我收到警告信息"test2 page from test2 page js"，显示指向test2.html页面的链接触发了pagecontainershow事件。

现在我点击链接返回test1.html，但是我收到警告"test1 page from test2 page js"，它指示在返回test1.html时没有触发pagecontainershow事件。这是事件如何工作，即它只在第一次加载每个页面时触发？如果是这样，每次显示页面时是否会触发另一个事件，无论是通过链接还是后退按钮？

有趣的是，如果我将脚本块从data-role=page div内部移动到外部（但仍在body块内）并清除缓存，我会得到不同的行为。在这种情况下，似乎只有test1.html pagecontainershow事件触发，test2.html事件永远不会触发;我只看到"test 1|2 page from test1 page js"，而不是"... from test2 page js"。

这个jQuery Mobile的东西还是很新的，有人可以说明这些东西是如何工作的吗？我做了一件可怕的错事吗？

Answer 1

当你从test1导航到test2时，jQM实际上找到了第一个data-role="page" div并通过AJAX将它加载到test1的DOM中。那时，您的脚本运行.off("pagecontainershow")，它会停用现有代码，然后激活test2中的代码。当你导航回test1时，jQM已经在DOM中拥有它，所以它只是隐藏了test2 div并显示了test1 div。 test2中的脚本仍处于活动状态。

如果将test2中的代码移出data-role="page" div，它永远不会被加载到test1 DOM中，因此test1中的原始脚本继续工作。

阅读本文： http://demos.jquerymobile.com/1.4.5/navigation-linking-pages/

如果你想要真正独立的页面，你可以覆盖页面的AJAX加载，但是你会失去漂亮的过渡。如果您喜欢AJAX导航，只需将所有代码放在第一页（或第一页引用的文件）中，然后任何页面加速代码都可以根据需要放在data-role="page" div中。

关于pagecontainershow何时以单页模式触发的困惑

1 个答案: