1

我在具有两个或更多页面的 jquery 移动网站上遇到了表单问题。

一个页面包含一个表单，当单击此表单的提交按钮时，我想提交表单数据，然后留在此页面上。所以我将该页面的 id 添加到表单的操作属性中。( <form action="#two">)。

但不幸的是，这似乎不起作用。提交表单数据时，始终加载实际文件的第一页，即使浏览器的 url 看起来正确（正确的 id 已附加到它）。

而且情况越来越糟。因为我将 id 添加到表单的 action 属性中，jqm 加载文件的第一页，但显然认为在第二页上，因此指向带有表单的页面的链接将不再起作用。

一件事解决了这个问题：添加data-ajax="false"到表单元素会强制 jqm 停止对此表单的基于 ajax 的页面处理，当单击提交按钮时，我最终会出现在正确的页面上，但我不想重新加载整个页面，所以没有解决方案。

有谁知道这里发生了什么并且遇到了同样的问题？随意尝试附加的例子，我希望有人能解决这个问题。

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head> 
<body> 

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

    <div data-role="header">
        <h1>First page</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Hello world</p>
        <p><a href="#two">Link to second page</a></p>   
    </div><!-- /content -->

</div><!-- /page -->


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

    <div data-role="header">
        <h1>Second page</h1>
    </div><!-- /header -->

    <div data-role="content">   

        <form action="#two">
            <button type="submit">Submit</button>
        </form>

    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>
4

1 回答 1

1

更改您的输入提交标签以调用函数。

<input type="submit" onclick="submitThis()" />

将此逻辑添加到您的提交函数中，该函数将通过 ajax 调用提交 url 并返回 false 以避免物理提交表单。

var submitThis = function() {

// get form data using jQuery, and call the link using $.ajax()

return false; // This will avoid submitting the page
}

--EDIT-- 代替或返回false，您也可以使用preventDefault() 方法

        $("#submit").submit( function (e) {
                e.preventDefault();
               // do your task
        });
于 2012-10-29T01:55:32.267 回答