jquery移动页面导航

Question

我想开发一个使用Phonegap和jQuery Mobile的移动应用程序。我遇到的问题是，当触发事件时页面不会改变。这里是页面和jQuery代码：

<div id="deviceready" data-role="page"> 
    <div data-role="header">Header</div> 
    <div role="main" class="ui-content"> 
     <form> 
      <label for="username">User name:</label> 
      <input name="username" id="username" value="" type="text"> 
      <label for="password">User name:</label> 
      <input name="password" id="password" value="" type="password"> 
      <button id="submit-login" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-user">Login</button> 
     </form> 
    </div> 
    <div data-role="footer">Footer</div> 
</div> 
<div id="formResults" data-role="page"> 
    <div data-role="header">Header</div> 
    <div>Hello from success</div> 
    <div data-role="footer">Footer</div> 
</div> 
<script type="text/javascript"> 
    $('#submit-login').click(function() { 
     $(':mobile-pagecontainer').pagecontainer('change', '#formResults', { 
      reload: true 
     }); 
    }); 
</script> 

导航不

Answer 1

页面之间的工作，我觉得你在你的表单动作被触发重新加载自身。 看看这个演示http://jsfiddle.net/JuY9L/ 我已经改变了窗体的代码，以便它返回一个空的动作。

HTML：

<div id="deviceready" data-role="page"> 
    <div data-role="header">Header</div> 
    <div role="main" class="ui-content"> 
     <form action="javascript:void(0);"> 
      <label for="username">User name:</label> 
      <input name="username" id="username" value="" type="text" /> 
      <label for="password">User name:</label> 
      <input name="password" id="password" value="" type="password" /> 
      <button id="submit-login" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-user">Login</button> 
     </form> 
    </div> 
    <div data-role="footer">Footer</div> 
</div> 
<div id="formResults" data-role="page"> 
    <div data-role="header">Header</div> 
    <div>Hello from success</div> 
    <div data-role="footer">Footer</div> 
</div>