jQueryで「ある要素をクリックしたらform要素を動的に生成してsubmitを実行」という処理をして、画面遷移させようとしました。

$('#hoge').click(function() {
  $('<form></form>')
    .attr('method', 'post')
    .attr('action', '/hoge')
    .submit();
});

簡単に書くとこんな感じ。

これをChromeで実行するときちんと動作します。なのでこれでいいや、と思っていたのですが、しかしこれをFirefoxで実行させるとsubmitが動作しません。ついでにIEでも動作しません。

何もコードは間違えてないはずなのにな・・・と思いつつ、少し考え、おもむろにform要素をbody要素に追加してみたところ、FirefoxとIEでもきちんと動作するようになりました。

$('#hoge').click(function() {
  $('<form></form>')
    .attr('method', 'post')
    .attr('action', '/hoge')
    .appendTo($('body:first'))
    .submit();
});

どうやら動的に生成したform要素は、明示的にDOMに追加されていないと動作しないようです。そういえば過去にも同じ現象で悩んだことがあったような気も…。

ここではjQueryで書きましたが、jQueryを使わずにJavaScriptで書く時も同様です。

• 
• ツイートで共有

著者について

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity や 電車遅延なう、梅酒.in、 #グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など