Question

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/

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

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

我在这里缺少什么？

Answer 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。）

Answer 2

还值得一提的是，您必须将表单添加到body元素，而不是文档。 Chrome是宽容的，只有在将表单添加到document元素时才会生效，但IE和Firefox需要您专门将其添加到body元素。

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

2 个答案: