如何使用 JS/jQuery 正确提交动态创建的表单？答案

【问题标题】：How to properly submit a dynamically created form with JS/jQuery?如何使用 JS/jQuery 正确提交动态创建的表单？
【发布时间】：2013-05-13 11:45:27
【问题描述】：

HTML：

<button class="search" name="search">search</button>

Javascript：

$('button.search').live('click', function(event) {
    var newForm = jQuery('<form>', {
        'action': 'http://www.google.com/search',
        'target': '_top'
    }).append(jQuery('<input>', {
        'name': 'q',
        'value': 'stack overflow',
        'type': 'hidden'
    }));
    newForm.submit();
});

小提琴：http://jsfiddle.net/YqGLH/90/

预期行为：单击搜索按钮时，页面应转发到谷歌搜索。在最新的 Chrome、Safari 和 Opera 中按预期工作。

在最新的 FF 和 IE9 中不起作用。单击按钮静默失败，没有错误消息，没有转发发生。

我在这里错过了什么？

【问题讨论】：

您似乎没有将新表单附加到实际页面 - 如果您在提交前添加 .appendTo("body") 会发生什么？
@nnnnnn 我确实不添加表单，这是要求吗？在那种情况下，它在某些浏览器中工作很奇怪
对我来说，不添加表单感觉是错误的，但我实际上不知道它是否包含在任何特定规范中。不过，您应该很容易尝试一下...
@nnnnnn 就是这样，如果您愿意添加作为答案，我会接受。对此要求的一些参考也很好。
更简单的可以是：window.location.href = "http://www.google.com/search?q=stack overflow";(link)

标签： javascript jquery forms cross-browser submit

【解决方案1】：

我没有参考任何特定规范来支持为什么，，但我相信如果您将新表单附加到页面，它会起作用：

$('button.search').live('click', function(event) {
    jQuery('<form>', {
        'action': 'http://www.google.com/search',
        'target': '_top'
    }).append(jQuery('<input>', {
        'name': 'q',
        'value': 'stack overflow',
        'type': 'hidden'
    })).appendTo('body')
    .submit();
});

还请注意，最好不要在任何新代码中继续使用.live()，因为它已从最新版本的 jQuery 中删除。而是使用：

$(document).on('click', 'button.search', function() {    // in jQuery v 1.7+   
// or
$(document).delegate('button.search', 'click', function() {    // in jQuery v 1.4.3+

（理想情况下，指定更靠近按钮的父元素而不是document。）

【讨论】：

如何传递多个参数？
@user3542450 - 只需将更多字段附加到表单。

【解决方案2】：

还值得一提的是，您必须将表单添加到body 元素，而不是文档。 Chrome 是宽容的，当表单刚刚添加到 document 元素时可以工作，但 IE 和 Firefox 需要您将其添加到 body 元素。

【讨论】：