1

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/

Expected behavior: when clicking on the search button, page should forward to google search. Works as expected in latest Chrome, Safari and Opera.

Does not work in latest FF and IE9. Clicking the button silently fails, no error messages, no forwarding happens.

What am I missing here?

4

2 回答 2

3

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

$('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-13T11:58:14.667 回答
2

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

于 2014-10-31T05:40:48.437 回答