1

我有一个简单的表格，它只要求在我的 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>
4

1 回答 1

2

您不能使用#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();
于 2013-06-18T15:02:23.673 回答