jQuery mobile：由于页面转换而导致提交表单的问题

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 -->

试试这个，如果!IsFromValid() 用你的替换我的!confirm("Other page submit?") 应该很好！ 如果它有效，你欠我一品脱，伙计=）

Answer 2

我想我现在和你在一起。基本上，我设法复制的是一个简单的 jQuery 调用，它在初始 index.html 页面加载时工作，当您离开并返回此页面时停止工作，url 变成类似 index.html#index.html 的东西。

这是由 jQuery mobile AJAXified 页面转换引起的，它有一些提到的限制here（在“已知限制”下），其中之一是：

页面引用的任何唯一资产 在一个 jQuery Mobile 驱动的网站中应该 放置在“页面”元素内 （具有数据角色的元素 “页面”的属性）。例如， 指向样式和脚本的链接 特定于特定页面可以是 在该 div 中引用。

因此，基本上，它的意思是您需要将 JavaScript 移动到 <div data-role="page"></div> 中。这对我有用。