获取错误“表单提交已取消，因为表单未连接”

我有一个旧的网站与JQuery 1.7，直到两天前正常工作。 突然，我的一些button不再工作，点击它们后，我在控制台中得到这个警告：

表单提交已取消，因为表单未连接

点击背后的代码是这样的：

this.handleExcelExporter = function(href, cols) { var form = $('<form method="post"><input type="submit" /><input type="hidden" name="layout" /></form>').attr('action', href); $('input[name="layout"]', form).val(JSON.stringify(cols)); $('input[type="submit"]', form).click(); } 

看来，Chrome 56不再支持这种types的代码。 不是吗？ 如果是的话，我的问题是：

1. 为什么这个突然发生？ 没有任何弃用警告？
2. 这个代码的解决方法是什么？
3. 有没有办法强制铬（或其他浏览器）像以前一样工作而不更改任何代码？

PS它不工作在最新的Firefox版本（没有任何消息）。 此外，它不能在IE 11.0和边缘！ （都没有任何消息）

Answer 1

快速回答：将表单附加到正文中。

document.body.appendChild(form);

或者，如果您使用上面的jQuery： $(document.body).append(form);

详细信息：根据HTML标准，如果表单不与浏览上下文（文档）相关联，则表单提交将被中止。

HTML SPEC见4.10.21.3.2

在Chrome 56中，这个规范被应用了。

Chrome代码差异请参阅@@ -347,9 +347,16 @@

PS关于你的问题＃1。 在我看来，与Ajax不同，表单提交导致即时页面移动。
所以，显示“弃用的警告信息”几乎是不可能的。
我也认为这个严重的改变不包括在function改变列表中是不可接受的。 Chrome 56function – http://www.chromestatus.com/features#milestone%3D56

Answer 2

您必须确保表单在文档中。 您可以将表单附加到正文。

Answer 3

我看到你正在使用jQuery进行表单初始化。

当我尝试@KyungHun Jeon的答案时，对我来说也不适用于jQuery。

所以，我尝试使用jQuery方法将表单附加到body：

 $(document.body).append(form); 

它的工作！

Answer 4

或者包含event.preventDefault（）; 在你的handleSubmit（event）{

请参阅https://facebook.github.io/react/docs/forms.html

Answer 5

根据来自KyungHun Jeon的回答，但是appendChild需要一个dom节点，所以向jquery对象添加一个索引以返回节点： document.body.appendChild(form[0])

Answer 6

在我们的一个实施中，我面临同样的问题。

我们正在使用jquery.forms.js。 这是一个表格插件，可在这里。 http://malsup.com/jquery/form/

我们使用了上面提供的相同的答案并粘贴

 $(document.body).append(form); 

它的工作。谢谢。

Answer 7

我看到这个消息使用angular度，所以我只是把方法=“后”和行动=“”出来，警告已经消失。