Question

我的项目结构如下：

enter image description here

我使用多页（单个HTML分为页面[data-role =＆＃34; page＆＃34;]）来开发移动应用程序。在上面的图像中，脚本文件位于js文件夹中，jquery相关插件在lib文件夹中是明智的。

请参阅此Fiddle 以获取我的代码（这样可以正常使用）。

我的问题是当点击登录按钮然后它需要显示视图页面但它不会显示DOM。

我的 index.html ：

<link rel="stylesheet"  href="css/jquery.mobile-1.3.2.min.css">
<script src="lib/jquery-1.9.1.min.js"></script>
<script src="lib/jquery.mobile-1.3.2.min.js"></script>
<script src="lib/handlebars-v1.3.0.js"></script>
<script src="login.js"></script>
<script src="view.page.js"></script>
</head>
<body>
    <div data-role="page" id="loginpage">
        <script id="login-tmpl" type="x-handlebars-template">
            <div data-role="header">
                <h1>Login Page</h1>
            </div>
            <div data-role="content">
                <div data-role="fieldcontain">
                    <label>Username</label>
                    <input type="text" value="a">
                </div>
                <div data-role="fieldcontain">
                    <label>Password</label>
                    <input type="password" value="">
                </div>

                   <button id="loginBtn">Login</button>

            </div><!-- /content -->
        </script>
    </div>
    <!-- /login page end -->
    <div data-role="page" id="viewpage">
        <div data-role="header">
            <h1> View Page</h1>
        </div>
        <input type="text" value=" view pager shown">
    </div>

和 login.js ：

$(document).on("pageinit","#loginpage",function(){
    $.mobile.page.prototype.options.domCache = true;
    var source = $("#login-tmpl").html();
    var template = Handlebars.compile(source);

    $("#loginpage").html(template);
    $("#loginpage").trigger("pagecreate");    
});

$(document).on("click","#loginBtn",function(){
    alert("btn clicked");
    $.mobile.page.prototype.options.domCache = true;
    $.mobile.changePage("#viewpage");
});

和 view.page.js 是：

$(document).on("pageshow","#viewpage",function(){
    alert("i am view page");
    $.mobile.page.prototype.options.domCache = true;
    $("#viewpage").trigger("pagecreate");      
});

注意： 不使用lib，js文件夹（www文件夹中的所有脚本和插件）它工作正常（意味着加载视图页面DOM＆＃39;）

在jQuery mobile中使用更改页面时，DOM元素不存在

0 个答案: