jQuery 与 jQuery mobile 积木表单提交答案

【问题标题】：jQuery with jQuery mobile bricks form submissionjQuery 与 jQuery mobile 积木表单提交
【发布时间】：2017-11-16 16:18:39
【问题描述】：

我正在尝试为我的网站实现一个带有表单（搜索字段和提交按钮）的可折叠侧边栏。

我已经引用为脚本：

https://code.jquery.com/jquery-1.11.3.min.js

和

https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js

但是，在这种组合中，表单不会提交，而是似乎将 get 参数应用于 URL，然后触发某种形式的 preventDefault。好像我使用的是旧版本的 jQuery ，但是当我尝试更新到：

https://code.jquery.com/jquery-3.2.1.min.js

我注意到我的可折叠菜单不再起作用并且完整的样式被破坏了。我也不能把它放在一边，因为他们大多已经在使用 jQuery。

示例 1（折叠有效，但表格无效）：

<html>

<head>
  <title>Test form</title>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
  <div data-role="page" id="about">
    <div data-role="header">
      <h1>Header</h1>
    </div>
    <div data-role="main" class="ui-content">
      <div data-role="collapsible">
        <h1>Search</h1>
        <form method="get">
          <input name="test" type="text">
          <button type="submit">Send</button>
        </form>
      </div>
    </div>
  </div>
</body>

</html>

示例 2（表单有效但无法折叠）：

<html>

<head>
  <title>Test form</title>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
  <div data-role="page" id="about">
    <div data-role="header">
      <h1>Header</h1>
    </div>
    <div data-role="main" class="ui-content">
      <div data-role="collapsible">
        <h1>Search</h1>
        <form method="get">
          <input name="test" type="text">
          <button type="submit">Send</button>
        </form>
      </div>
    </div>
  </div>
</body>

</html>

对于第一个示例，我还尝试声明一个输入类型按钮，而不是使用手动提交和触发它：

$('#submitbutton').click(function() {
    $('#myform').submit();
});

没有成功。

提前致谢！

【问题讨论】：

标签： javascript jquery html css forms

【解决方案1】：

jquery 移动版 1.4.5 仅锁定到某些较旧的 jquery 版本，尚未在 jquery2.0 以上的较旧版本上进行测试

如果需要，请在此处阅读更多信息：http://blog.jquerymobile.com/2013/02/20/jquery-mobile-1-3-0-released/。

这可以解释为什么jqueryversion 3.2.1 不适用于您的可折叠表单。

同时在 1.11.3 版本方面，根据开发者控制台，您所要做的就是将表单加载到 Web 服务器上，而不是本地加载到您的计算机上（C:/Folder/.html 不会工作，你需要使用浏览器扩展，如 https 或 http)

我希望这对您有所帮助，因为我自己不是专业程序员，无法为您编写工作代码。

【讨论】：

好的，谢谢，这解释了一点，但是我已经在我的网络服务器和本地测试了这个，结果相同\-:
也许可以尝试将您的 jquery 降级到您当前使用的版本之前但又与移动 jquery 兼容的版本？

【解决方案2】：

看来我判断错了。 jQuery mobile 带来了很多自动引入的功能，例如使用 XHR 请求在后台提交表单，而不是重新加载网站。

恕我直言，他们应该更清楚一点，因为我很难弄清楚这个问题。解决方案是：对于你不想在后台加载的 `s 或 's，添加标签：data-ajax="false" 像这样：

<form action="#" method="get" data-ajax="false">

<a href="" data-ajax="false">

希望这对某人有所帮助。

【讨论】：