今更ながら、jQuery の on() を知った。
http://api.jquery.com/on/
本当は live() を知って調べたんだけど、
これは jQuery 1.9 で廃止になったらしい。
同時に bind() / delegate() も廃止になる。
これら廃止になった3つをまとめたのが on() になる。
つまり、on() を使うと live() / bind() / delegate() の機能を使うことができる。
今回は旧API live() の代用として on() を使った場合。
live() は HTML要素のイベントをバインドする関数。
click() とか blur() と同じ。
では、何が違うのか・・・?
click() は HTMLが読み込まれた時点の要素にしかclickイベントをバインドしない。
つまり、JavaScript で動的にボタンを生成した場合、
そのボタンには clickイベントがバインドされていない。
なので、生成したボタンにclickイベントをバインドする必要がある。
これは今までの僕です。
いちいちバインドしていました。
live() は動的に生成した要素にもバインドしてくれる。
これは嬉しい。
ただ、前述の通り、live() は廃止されたので、 on() で実装する。
以下は click() でイベントをバインドしているので、
動的にボタンを生成してもイベントはバインドされない。
$(function(){ $('.btn').click(function(){ alert(); }); });
以下のようにすると、動的に生成したボタンにもイベントがバインドされる。
$(function(){ $(document).on('click', '.btn', function(){ alert(); }); });
これは便利だ・・・。
というか、なぜ今まで知らなかったんだ・・・。