Javascript Jquery移动页面导航

我正在尝试使用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>

标题
用户名：
用户名：
登录
页脚
标题
来自成功的你好
页脚
$（“#提交登录名”）。单击（函数（）{
$（'：mobile pagecontainer'）。pagecontainer（'change'，'#formResults'{
重新加载：正确
});
});

---

页面之间的导航不起作用

我认为您表单中的操作被触发以重新加载自身。 看看这个演示 其中，我更改了表单的代码，以便它返回一个空操作

HTML:

标题
用户名：
用户名：
登录
页脚
标题
来自成功的你好
页脚

您是否尝试过按照文档中的建议对其进行更改，因为我在文档中发现，$.mobile.changePage已被弃用，我发现了此方法。问题是页面更改和返回到旧页面是同时发生的

<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>