jQuery 移动表单提交正在重新加载而不是加载新页面答案

【问题标题】：jQuery mobile form submit is reloading instead of loading new pagejQuery 移动表单提交正在重新加载而不是加载新页面
【发布时间】：2013-06-18 14:38:18
【问题描述】：

我有一个简单的表单，它只要求在我的 jQuery 移动应用程序上出现“第一个”的用户名，想法是他们将输入他们的用户名（然后使用 cookie 或会话进行身份验证以供进一步使用），然后显示应用程序的“主”页面。截至目前，当我尝试在表单中输入我的名字时，“索引”页面会立即出现，然后表单会重新加载到顶部。我不明白为什么会这样，感谢任何帮助。

js:

    $(document).on('pagebeforeshow', '#introform', function(){  
        $(document).on('click', '#mysubmit', function() { // catch the form's submit event
            $.mobile.changePage("#index", {transition: "slidedown"});
        });    
});

html:

<body>


<div data-role="page" id="loginform">

<div data-role="content" id="nameof">


        <form id="username" class="ui-body ui-body-a ui-corner-all" method="POST" action="#index">  
            <fieldset style="text-align: center;">
                <div data-role="fieldcontain">
                    <label for="name" style="width: 100%; margin-top: -10px; margin-bottom: 10px;">what's your name?</label>
                    <input id="name" type="text" name="name" />
                </div>
                <button id="mysubmit" data-theme="a" type="submit">submit</button>
            </fieldset>
        </form>

</div>
</div>


<div data-role="page" id="index">
   main body of app
</div>

【问题讨论】：

标签： jquery forms jquery-mobile mobile

【解决方案1】：

你不能用#index来引用，换个名字试试

<div data-role="page" id="index">

也许

<div data-role="page" id="uniqueName">

当然还有改js：

$.mobile.changePage("#uniqueName", {transition: "slidedown"});

编辑：我刚试过这个，实际上 jQuery mobile 仍然将表单存储在 DOM 中，你必须删除它，所以如果你将这一行添加到你的 js 中，#index 实际上可以正常工作：

$("#introform").remove();

【讨论】：