【Web】動的に追加した要素をイベント起動時（ClickとかSubmitとか）に拾うJavaScript

これは何？

※　壁にぶち当たれば当たり前だけど、ちょっと開発から離れると忘れるのでメモ

動的に追加した<input type="text" name="hoge" />だと、普通に

$("form").submit(function(){
  var data = $("form").serializeArray();
  // 送信
});

にやっても、動的に追加した要素がdataの中に入ってこない。

それを解決する方法。

問題点

// inputの追加
$("input#hoge").click(function(){
   $("div#hoge-hoge").append("<input type='text' name='hoge-fuga'/>");
});

// form
$("form").submit(function(){
  var data = $("form").serializeArray();
  //!!! 追加した　<input type='text' name='hoge-fuga' />　が data　に入ってない！！
});

解決策

onメソッドを使用する。jqueryのバージョン1.9位では、liveメソッドだがdeprecatedになっているので、onを用いる模様。

$(document).on('submit', 'form',function(){
  var data = $("form").serializeArray();
});

clickメソッドとかだと最初にページを読み込んだ情報しか読み込んでくれない。動的に追加したものを扱う場合は、onメソッドを用いるのがよい。

参考

jQueryのbind/live/delegateの違いまとめ、と新API .on()の使い方