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

HTML：

search 

使用Javascript：

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

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

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

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

我在这里想念的是什么？

Answer 1

我没有任何特定规范的引用来支持原因，但我相信如果您将新表单附加到页面，它将起作用：

 $('button.search').live('click', function(event) { jQuery('', { 'action': 'http://www.google.com/search', 'target': '_top' }).append(jQuery('', { '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 。）

Answer 2

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