Question

我正在创建一个带有少量HTML页面的phonegap android应用程序，并使用jquery ajax在服务器之间传输数据。要在页面之间移动我正在使用jquery $ .mobile.changePage（）方法。但是，当我从索引页面（最初加载的URL）移动到另一个页面的页面后，该页面中的jquery方法无效。

但是，当我最初使用java代码加载特定页面时，

super.loadUrl("file:///android_asset/www/secondpage.html");它运作良好。

我试过了， $.mobile.changePage( "secondpage.html", { transition: "flip" });也是，

$.mobile.changePage( "file:///android_asset/www/secondpage.html", { transition: "flip" });

既不适合我。

第一页上的

代码

$(document).ready(function(){    
$('#submitbtn').click(function(){    
$vari = $('#signin').serialize();
alert($vari);
$.mobile.loading( "show" );
$.get('http://192.**.**.**/~114178R/v_login/signin.php', $vari, 

            function(data){
                $('#result').html(data);
                $.mobile.loading( "hide" );
            });             


            return false;

});

//above part works fine.
//Code to move to the second page. and it also moves.
$('#signup').click(function(){
$.mobile.changePage( "second.html", { transition: "flip" });

});

});

我附加了第二页的js代码，并在second.html的头部声明了它。但在第二页javascript没有调用。但是css文件正在加载。在localhost这个页面和javascript功能很好。但在模拟器和设备问题发生。当我按下提交按钮（部署后）后，它只刷新表单。但是当我从java文件加载second.html作为索引页面时，它运行良好。

super.loadUrl("file:///android_asset/www/login.html"); // second page not works.

super.loadUrl("file:///android_asset/www/second.html"); //second.html works well.

html for second.html

<head>
<!--<meta content="text/html; charset=utf-8" http-equiv="Content-Type">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Register</title>
<script type="text/javascript" src="assets/jquery 1.8.js"></script>
<script type="text/javascript" src="assets/jquerymobile.js"></script>
<script type="text/javascript" src="js/register.js"></script>
<link rel="stylesheet" href="assets/jquerymobile.css"></link>


</head>

<body>
<script type="text/javascript" src="js/register.js"></script>
<div data-role="page" data-theme="b" id="maincont" data-add-back-btn="true">
      <div data-role="header">
        <h1>Register</h1>
         <a href="login.html" data-rel="back"></a>
      </div><!-- /header -->

      <div data-role="content" id="form">
        <form id="signup" method="post">

        <label for="basic">Your Name:</label>
        <input type="text" name="urname" id="urname" data-mini="true"  />

        <br>

        <label for="basic">User Name</label>
        <input type="text" name="uname" id="uname" data-mini="true"  />
        <br>


        <br>
        <li data-role="fieldcontain">
                <label for="select-choice-a" class="select">Choose your position :</label>
                <select name="select-choice-a" id="select-choice-a" data-native-menu="false" data-theme="c">
                    <option>New Team Member</option>
                    <option value="standard">Software Developer</option>
                    <option value="rush">Managerial Level</option>
                    <option value="express">Techlead</option>
                    <option value="overnight">Branch Manager</option>
                </select>
            </li>
        <label for="basic">Password :</label>
        <input type="password" placeholder="A-Z and a-z and 0-9" name="pw_1" id="pwi_1" data-mini="true"/>
        <br>
        <label for="basic">Enter password again :</label>
        <input type="password" placeholder="A-Z and a-z and 0-9" name="pw_2" id="pwi_2" data-mini="true"/>
        <br>



        <input type="submit" id="submitbtn" value="Register Me" data-corners="true" data-shadow="true" data-iconshadow="true">
        <br>

        </form>  
        <div id="result"></div>
      </div><!-- /content -->
        <br>
        <br>
      <div data-role="footer">
        <h4>Sign in to enjoy Rides!</h4>
      </div><!-- /header -->

    </div>
</body>

</html>

javascript register.js for second.html

$(document).ready(function() {

    $('#submitbtn').click(function() {
    alert("clicked");

    if(($('#pwi_1').val()!= "") && ($('#pwi_1').val()==$('#pwi_2').val())){
        alert("if");
        alert($('#pwi_1').val());

        $vari = $('#signup').serialize();
        alert($vari);
        $.mobile.loading( "show" );
        $.get('http://xxx.xxx.xxx.xxx/register.php', $vari, 

            function(data){
                $('#result').html(data);
                $.mobile.loading( "hide" );
            });             

        return false;
    }
    else {
        alert("else");
        alert($('#pwi_2').val());
    }
});
});

Answer 1

也许你可以使用window.location.replace（login.html）;

当您使用Jquery时，请务必在所有页面中导入脚本。

希望它有所帮助;）

Answer 2

<script type="text/javascript" src="js/register.js"></script>

将上述代码放入您的页面。

<div data-role="page" data-theme="b" id="maincont" data-add-back-btn="true">

即

<div data-role="page" data-theme="b" id="maincont" data-add-back-btn="true">
<script type="text/javascript" src="js/register.js"></script>

本节中未包含的脚本仅在页面refesh上运行。

在phonegap中的HTMl页面之间移动

2 个答案: