Creating and submitting forms with jQuery in Firefox

There’s an interesting gotcha when creating and submitting forms using jQuery in Firefox. Firefox silently fails to submit forms that have not yet been attached to the DOM. For example, consider the following scenario:

$('a.destroy').click(function() {
  if (confirm("Blah blah blah...")) {
    var f = $('<form method="post" action="' + $(this).attr('href') + '"></form>');
    f.html('<input type="hidden" name="_method" value="delete" />');
    f.submit();
  }
  return false;
});

Clicking on a link with CSS class “destroy” in Safari or Chrome works as expected – a form is created and submitted. In Firefox, nothing seems to happen. To get it working in Firefox, the form must be attached to the DOM, e.g., using appendTo():

$('a.destroy').click(function() {
  if (confirm("Blah blah blah...")) {
    var f = $('<form method="post" action="' + $(this).attr('href') + '"></form>');
    f.html('<input type="hidden" name="_method" value="delete" />');
    f.appendTo($('body')); // required for submission to work in Firefox
    f.submit();
  }
  return false;
});

With the addition of f.appendTo($('body')), clicking on a link with CSS class “destroy” submits in Firefox (as well as Safari and Chrome). I scratched my head on this for a while before stumbling across balpha’s comment on the jQuery API documentation for submit().