Question

我有工作的javascript移动应用程序，我一直在尝试重组（正确或错误）。 index.html文件包含一个页面（使用data-role="page"），其中包含我隐藏和显示的各种<div>元素，具体取决于用户想要执行的操作。我想我可以通过再次使用data-role将每个<div>元素放在它们自己的页面中（仍然在index.html文件中）来改进结构。但是，后续页面会丢失其javascript功能。我创建了一个非常简单的index.html文件来演示：

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"/></script>
    <script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script>
</head>

<body>
    <div data-role="page" id="mainPage">
        <INPUT type="button" id="showPageTwo" value="Show Next Page" />
    </div>

    <div data-role="page" id="secondPage">
        <INPUT type="button" id="showMainPage" value="Show Main Page" />
    </div>

<script>
    $(document).on("pageshow", "#mainPage", function(e) {   
        alert("Main page");

        $("#showPageTwo").click(function()
        {
            $("#secondPage").show();
            $("#mainPage").hide();      
        });
    });

    $(document).on("pageshow", "#secondPage", function(e) { 
        alert("Second page");

        $("#showMainPage").click(function()
        {
            $("#mainPage").show();
            $("#secondPage").hide();        
        });
    });
</script>    

</body>

</html>

主页面显示正确，显示警报$("#showPageTwo").click(function()有效。但是当第二页加载时，没有一个javascript运行。

此外，当显示secondPage时，它没有来自jquery.mobile-1.3.2.min.css的样式，即mainPage具有。

我做错了什么或误会了？（这是在Eclipse AVD中运行应用程序时）

另外，我想知道：

我尝试使用data-role="page"好的或坏的做法重构我的代码的方式是什么？是否有推荐的方式来构建＆＃34;页面＆＃34;在移动应用中？
我还想将自定义脚本放在自己的.js文件中。我只能在</body>标记之前加载上面代码中显示的脚本吗？有没有办法在标题中加载所有其他脚本？

显示第二页时，Jquery移动pageshow事件不会触发

0 个答案: