正确使用版本1.7.1中的jQuery Mobile事件处理

我对jQuery Mobile事件束手无策。我不理解它们，尽管遵循了文档到T。我正在使用以下代码初始化我的页面。问题是，有些似乎会多次触发，偶尔当我回到一个页面时，什么都不会出现，就好像.live pageinit根本不会触发一样。我很困惑。pageinit是要走的路吗？是现场最佳实践吗？我需要自己清理并使用类似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>

你可以试试这样的东西：

<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>

希望能有所帮助。

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

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

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

需要记住的一件重要事情是，您的用户也可以直接访问您的page2，这意味着所有代码也应该可用于page2。因此，我强烈建议将所有代码包含在所有页面的标题中引用的js文件中，而不是直接包含在页面中的脚本标记中。

相关内容

最新更新

热门标签：