如何正确提交一个动态创建的JS/jQuery形式？

HTML：如何正确提交一个动态创建的JS/jQuery形式？

<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中不起作用。单击按钮静静地失败，没有错误信息，不会发生转发。

我在这里错过了什么？

来源

2013-05-13 András Szepesházi

您似乎没有将新表单追加到实际页面 - 如果在提交之前添加'.appendTo（“body”）'会发生什么？ – nnnnnn 2013-05-13 11:46:52

@nnnnnn我确实不添加表单，这是一个需求？在这种情况下，奇怪的是它在某些浏览器中可以正常工作 – 2013-05-13 11:48:55

对我来说，它感觉不错，不会添加表单，但我实际上不知道它是否被任何特定的规范所覆盖。尽管如此，它应该很容易让你尝试一下...... – nnnnnn 2013-05-13 11:50:51

我没有提到任何具体规格，支持为什么，但我相信，如果你追加新形式的网页，将工作：

$('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）

来源

2013-05-13 11:58:14 nnnnnn

如何传递多个参数？ – user3542450 2016-11-25 06:00:42

@ user3542450 - 只需在表单中添加更多字段。 – nnnnnn 2016-11-25 06:08:11

另外值得一提的是，您必须将窗体添加到body元素，而不是文件。当Chrome浏览器刚刚添加到document元素时，Chrome会保持原状并可以正常工作，但IE和Firefox需要您将其添加到body元素中。

来源

2014-10-31 05:40:48 Ali

如何正确提交一个动态创建的JS/jQuery形式？

回答

相关问题