$.mobile.changePage(） 登录后不起作用

$.mobile.changePage() after login not working

本文关键字：登录 不起作用 mobile changePage      更新时间：2023-09-26

我正在构建一个以登录表单开头的WebWorks应用程序，如果登录成功，应该显示id='map'的第二个页面。我尝试使用$.mobile.changePage来显示页面，但它只重新加载登录页面。为什么不加载第二页？

我删除了所有登录验证代码以简化事情，以便我可以找出更改页面不起作用的原因。

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="lib/BlackBerry-JQM-all-1.0.0.css" />
<script src="lib/BlackBerry-JQM-all-1.0.0.js"></script>
<script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBHGb5Si_2oXtOLCo_IzRIJPtrKkhyFPsU&sensor=false"></script>
</head>
<body>
<div data-role="page" id="login">
  <div data-role="header">
    <h1>TCOB - Login</h1>
  </div>
  <!-- /header -->
  <div data-role="content">
    <div class="BB10Container">
      <form method="post">
        <label for="username">Username</label>
        <input type="text" name="user-input" id="username" placeholder="Username"/>
        <label for="basic">Password</label>
        <input type="password" name="pass-input" id="password" placeholder="Password"/>
        <input type="submit" data-role="button" data-inline="true" data-icon="check" value="Submit" id="submit">
      </form>
    </div>
  </div>
  <!-- /content -->
  <div data-role="footer" data-position="fixed">
            </div>
  </div>
  <div data-role="page" id="map" >
  <div data-role="header">
    <h1>TCoB</h1>
  </div>
  <div data-role="content">
  </div>
  <div data-role="footer" data-position="fixed">
  </div>
</div>
</div>
<script> 
    $(document).bind("mobileinit", function() {
        $.mobile.page.prototype.options.backBtnText = "Zur&uuml;ck";
    });
     $('#username').keyup(function(){
         $.get("http://www.hedonsoft.com/tcob/php/check_user.php",{username: $("#username").val()},function(data){
             if(data == true){
                 $('#username').css("background-color","#00FFFF").css("color","#000000");
             }else{
                 $('#username').css("background-color","#000000").css("color","#FFFFFF");
             }
         });
      });
      $('#submit').click(function(){
          $.mobile.changePage("#map");
      });
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
function getLocation(){
}
</script>
</body>
</html>

问题是你们既使用自定义click处理程序，又使用<form>提交表单。

自定义单击处理程序将导航到#map，您实际上可以看到该页面非常短暂地闪烁，但由于您的form没有action属性，它将重定向到同一页面 - 即登录页面，导致第二次导航，从而导致您正在经历的奇怪行为。

不用form看到这个小提琴，看看它是否有效。

但是，请注意，$.mobile.changePage 从 1.4.0 RC1 开始标记为已弃用。

相关文章：