2

我对 jQuery Mobile 事件束手无策。尽管遵循了 T 的文档，但我不理解它们。我正在使用以下代码来初始化我的页面。问题是有些似乎触发了多次，有时当我返回一个页面时什么都不会出现，就好像 .live pageinit 根本不会触发一样。我很困惑。pageinit 是要走的路吗？.live 是最佳实践吗？我是否需要自己清理并使用 pagehide 之类的东西从 DOM 中删除内容？请帮我理解。谢谢！

// page number 1
<header>
   includes and stuff
<header>
<body>
    <div data-role="page" data-theme="a" id="dashboardPage">
        $('#dashboardPage').live('pageinit',function() {

        });

        // somewhere in here a page transition to anotherPage.html (not necessarily the id of the new page in the <div data-role-"page data-theme...> declaration

        $.mobile.changePage("anotherPage.html",{transition : "slide"});

    </div>
</body>

// page number 2
<header>
   includes and stuff
<header>
<body>
    <div data-role="page" data-theme="a" id="specialsPage">
        $('#specialsPage').live('pageinit',function() {

        });
    </div>
</body>
4

2 回答 2

0

使用 JQuery mobile 时，您应该考虑拥有一个动态更新内容的页面。您不会像往常那样从一页导航到另一页。因此，您使用 JQM 导航到的页面中存在的任何代码都将被忽略（如果更改第 2 页的标题，并使用 changepage 从第 1 页导航到此页面，您将看不到任何区别）。因此，您的所有 js 代码都应该在您的用户将到达的页面中直接可用。

如果在第 1 页的脚本中添加以下代码，您将正确检测到第 2 页在加载 changepage 时的初始化。

$("#specialsPage").live('pageinit',function(event){
                alert( '"initializing" page 2: specialsPage');
});

要记住的重要一点是，您的用户也可能直接访问您的 page2，这意味着所有代码也应该可用于第 2 页。因此，我强烈建议您将所有代码包含在所有页面的标题，而不是直接在页面内的脚本标签中。

于 2012-09-05T16:22:01.647 回答
0

你可以尝试这样的事情：

<html>
    <header>
        <!--  BASIC INCLUDES -->
        <link rel="stylesheet" href="./css/jquery.structure-1.1.0.min.css" />
        <link rel="stylesheet" href="./css/jquery.mobile-1.1.0.min.css" />
        <link rel="stylesheet" href="./css/jquery.mobile.theme-1.1.0.min.css" />

        <script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="./js/jquery.mobile-1.1.0.min.js"></script>
        <!--  END - BASIC INCLUDES -->

    </header>
    <body>
        <!--  PAGE 1 -->
        <div data-role="page" data-theme="a" id="dashboardPage">
            <script>
                // INITIALIGE PAGE 1 -  dashboardPage
                $("#dashboardPage").live('pageinit',function(event){
                    alert( '"initializing" page 1: dashboardPage');
                });
            </script>

            HERE YOU ARE AT PAGE 1 (dashboardPage)!!!<br><br>
            <a href="#specialsPage" data-transition="pop">CLICK HERE TO GO TO PAGE 2 (specialsPage)</a>
        </div>

        <!--  PAGE 2 -->
        <div data-role="page" data-theme="a" id="specialsPage">
            <script>
                // INITIALIGE PAGE 2 -  specialsPage
                $("#specialsPage").live('pageinit',function(event){
                    alert( '"initializing" page 2: specialsPage');
                });
            </script>

            HERE YOU ARE AT PAGE 2 (specialsPage)!!!<br><br>
            <a href="#dashboardPage" data-transition="slide">CLICK HERE TO GO TO PAGE 1 (dashboardPage)</a>
        </div>
    </body>
</html>

希望能帮助到你。

于 2012-09-04T09:40:46.483 回答