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

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();
});

fiddle :http://jsfiddle.net/YqGLH/90/

预期行为:点击搜索按钮时，页面应转到谷歌搜索。在最新的 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。)