Javascript 显示第二个页面时，不会触发Jquery mobile pageshow事件_Javascript_Jquery_Html_Jquery Mobile

Javascript 显示第二个页面时，不会触发Jquery mobile pageshow事件

javascript jquery html jquery-mobile

Javascript 显示第二个页面时，不会触发Jquery mobile pageshow事件,javascript,jquery,html,jquery-mobile,Javascript,Jquery,Html,Jquery Mobile,我有一个正在运行的javascript移动应用程序，我一直在尝试重新构造它（正确或错误）。index.html文件包含一个页面（使用data role=“page”），其中包含各种元素，根据用户的需要隐藏和显示这些元素。我想我可以通过再次使用数据角色将这些元素放在各自的页面（仍然在index.html文件中）来改进结构。但是，后续页面将丢失其javascript功能。我创建了一个非常简单的index.html文件来演示： <html> <head> <me

我有一个正在运行的javascript移动应用程序，我一直在尝试重新构造它（正确或错误）。index.html文件包含一个页面（使用

data role=“page”

），其中包含各种

元素，根据用户的需要隐藏和显示这些元素。我想我可以通过再次使用数据角色将这些

元素放在各自的页面（仍然在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>


$（文件）。在（“pageshow”、“#mainPage”上，函数（e）{
警报（“主页”）；
$（“#showPageTwo”）。单击（函数（）
{
$（“#第二页”）.show（）；
$（“#主页”）.hide（）；
});
});
$（文件）。在（“pageshow”，第二页），功能（e）{
警告（“第二页”）；
$（“#显示主页”）。单击（函数（）
{
$（“#主页”）.show（）；
$（“#第二页”）.hide（）；
});
});

主页显示正确，警报显示为

$（“#showPageTwo”）。单击（function（）

工作。但加载第二个页面时，没有javascript运行

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

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

此外，我想知道：

我尝试使用

data role=“page”

好的还是坏的做法来重新构造代码？在移动应用程序中有没有推荐的方法来构造“页面”

我还想将自定义脚本放在它们自己的.js文件中。我只能在

标记之前加载上面代码中显示的脚本吗？有没有办法将其与所有其他脚本一起加载到标题中

当使用多页模型时，将js放在头部。