Question

我有一个简单的表单，它只询问在我的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>

Answer 1

您不能使用#index参考，为

尝试不同的名称

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

也许

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

当然改变了js：

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

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

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

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

1 个答案: