Jquery mobile 在版本1.7.1中正确使用jQuery Mobile事件处理_Jquery Mobile

Jquery mobile 在版本1.7.1中正确使用jQuery Mobile事件处理

jquery-mobile

Jquery mobile 在版本1.7.1中正确使用jQuery Mobile事件处理,jquery-mobile,Jquery Mobile,我对jQuery移动事件束手无策。我不理解它们，尽管我遵循文档到T。我正在使用以下代码初始化我的页面。问题是，有些页面似乎会多次启动，有时当我返回到某个页面时，什么都不会出现，就好像live pageinit根本不会启动一样。我很困惑。pageinit是正确的选择吗？现场直播是最佳实践吗？我是否需要清理自己，然后使用pagehide之类的工具从DOM中删除内容？请帮我理解。谢谢 // page number 1 <header> includes and stuff <h

我对jQuery移动事件束手无策。我不理解它们，尽管我遵循文档到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>

//第1页
包括
$（'#dashboardPage'）.live（'pageinit'，function（）{
});
//在这里的某个地方，页面转换为另一个page.html（不一定是中新页面的id），您可以尝试以下操作：
<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>


//初始值第1页-仪表板页
$（“#dashboardPage”）.live（'pageinit'，函数（事件）{
警报（“正在初始化”第1页：仪表板页）；
});
这里是第1页（仪表板页）！！！


//初始值第2页-专用页
$（“#SpecialPage”）.live（'pageinit'，函数（事件）{
警报（“‘初始化’第2页：特殊页面”）；
});
这里是第2页（特别页面）！！！



希望有帮助。
您可以尝试以下方法：
<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>


//初始值第1页-仪表板页
$（“#dashboardPage”）.live（'pageinit'，函数（事件）{
警报（“正在初始化”第1页：仪表板页）；
});
这里是第1页（仪表板页）！！！


//初始值第2页-专用页
$（“#SpecialPage”）.live（'pageinit'，函数（事件）{
警报（“‘初始化’第2页：特殊页面”）；
});
这里是第2页（特别页面）！！！



希望有帮助。< P>当使用jQuery Mobile时，你应该考虑你有一个内容动态更新的页面。你不会像平常那样从一个页面导航到另一个页面。
因此，使用JQM导航到的页面中存在的任何代码都将被忽略（tyr更改第2页的标题，并使用changepage从第1页导航到此页面，您将看不到任何差异）。
因此，所有js代码都应该直接在用户将到达的页面中可用
如果在第1页的脚本中添加以下代码，则在加载changepage时，您将首先检测到第2页的初始化
$("#specialsPage").live('pageinit',function(event){
                alert( '"initializing" page 2: specialsPage');
});

需要记住的一件重要事情是，您的用户也可以直接访问您的page2，这意味着所有代码也应可用于page2。因此，我强烈建议将所有代码包含在所有页面标题中引用的js文件中，而不是直接包含在页面内的脚本标记中。ING jQuery Mobile你应该考虑你有一个动态更新内容的页面，你不会像平常那样从一个页面导航到另一个页面。
因此，使用JQM导航到的页面中存在的任何代码都将被忽略（tyr更改第2页的标题，并使用changepage从第1页导航到此页面，您将看不到任何差异）。
因此，所有js代码都应该直接在用户将到达的页面中可用
如果在第1页的脚本中添加以下代码，则在加载changepage时，您将首先检测到第2页的初始化
$("#specialsPage").live('pageinit',function(event){
                alert( '"initializing" page 2: specialsPage');
});

需要记住的一件重要事情是，您的用户也可以直接访问您的page2，这意味着所有代码也应可用于page2。因此，我强烈建议将您的所有代码包含在所有页面标题中引用的js文件中，而不是直接包含在页面内的脚本标记中。
是否为文件创建通用包含？我可以将所有javascript包含和css包含放在其中吗？可能不是，对…您可以在第一页的页眉中包含指向css和js文件的所有链接。从那里通过jquerymobile导航的任何页面都将从中受益。检查te结尾回答：所有文件都应被引用在所有页面的标题中，用户可能会直接指向如何对文件进行通用包含？我可以将所有javascript包含和css包含放在其中吗？可能不会，对……您可以在第一个页面的标题中包含指向css和js文件的所有链接。从那里通过jquerymobile导航的任何页面都将检查te的结尾回答：所有文件都应该在用户可以直接访问的所有页面的标题中引用