jQuery 移动 : problem with submitting forms due to page transitions

Question

我对我在 jquery mobile 中尝试做的事情有点困惑。我的网站总共有大约 5 个页面，每个页面上都有相同的网络表单。我编写了一个使用 jquery ajax 处理表单的脚本。所有这些都适用于index.html。

我的index.html中有一个page2 div，用作我网站的第二页，但该表单似乎不起作用。

我还有一个 page3.html 页面。当我进入此页面时，它的形式与我在主页上的形式相同，但它不需要任何 jquery js，就像我使用 jquery 隐藏 p.error 行一样，它在主页上工作正常，但不根本不会在内部页面上触发。

有办法解决这个问题吗？当涉及到在整个网站上具有相同的精确形式时，jquery mobile 中的一般建议是什么？现在，我只能让网络表单在我的主页上运行。

这是网站上的一些代码，首先是 js。

$(document).ready(function() {
     $('.error').hide();

     $(function() {
     $(".button").click(function() {
     ... form validations go here ...
     ... using $.ajax({ type: "post", data: datastring }) ...

我只是摘录了js代码。 document.read 函数可能仅在主页上加载，然后所有内部页面都会丢失该脚本。那么，对于不是index.htl 的页面，我应该以不同的方式触发我的表单脚本吗？

我将每个页面包装在一个 div 中，如下所示:

<div id="container" data-role="page">... my page content code here ...</div>
<div id="page2" data-role="page">... my page content code here ...</div>

每个页面都有相同的表单，但是当我转到第2页时，表单会验证，但它也与其他表单冲突，所以我无法提交它，因为它总是将表单字段视为空白。

每个页面都包含其他页面的链接。当我单击转到不是index或page2的页面时，表单上没有任何作用(我的p.error语句可见，单击提交按钮会将我发送到405错误页面)。当我从主页提交表单时，一切都完全按预期进行。如果我不从下拉列表中选择某些内容，它会显示我的 p.error 短语。如果我将电子邮件地址字段留空，它将显示 p.error 短语以显示错误消息。

我很确定问题是 jquery mobile 如何劫持脚本并将内容加载到 DOM 中，并且我读到我只能在主页上加载 javascript 一次。这是真的吗？

我正在寻找的最终结果是一种在网站的每个页面上拥有功能齐全的表单并进行表单验证的方法，无论它是堆叠数据角色页面还是外部数据角色页面，并且我想保留所有内容动画过渡。

Answer 1

让我们从头开始。 结果默认情况下表单提交是 Ajaxified，RTFM here 。 和this is how你可以用 jQuery 来处理它。

由此，我创建了 2 个页面，提交按钮仅提交其所在的表单，这正是您所需要的!

第1页:

<div data-role="page">
    <script type="text/javascript">
        $(document).ready(function () {    
            $("form").submit(function () { // important: form selector, not ID
                if (!confirm("Index submit?"))
                    return false;
            });
        });
    </script>
    <div data-role="header">
        <h1>Main Page</h1>
    </div><!-- /header -->

    <div data-role="content">
        <form id="form1" method="post" action="index.html">
            <p>Page content goes here.</p>
            <input type="submit" value="Submit" class="button" />
            <a href="otherpage.html">Other Page</a>
        </form>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

第 2 页:

<div id="page2" data-role="page">
    <script type="text/javascript">
        $(document).ready(function () {
            $("form").submit(function () { // important: form selector, not ID
                if (!confirm("Other page submit?"))
                    return false;
            });
        });
    </script>
    <div data-role="header">
        <h1>Other Page</h1>
    </div><!-- /header -->

    <div data-role="content"> 
        <form id="form2" method="post" action="otherpage.html">  
            <p>Page content goes here.</p>
            <input type="submit" value="Submit" class="button" />
            <a href="index.html">Home Page</a> 
        </form>   
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

尝试一下，将我的 !confirm("Other page Submit?") 替换为您的 if !IsFromValid() ，应该就可以了! 如果成功的话，你欠我一品脱，伙计 =)