Как правильно отправить динамически созданную форму с помощью 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/

Ожидаемое поведение: при нажатии на кнопку поиска, страница должна направить поиска 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.