読者です 読者をやめる 読者になる 読者になる

【jQuery】on() で イベントをバインドする。

今更ながら、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();
    });
});


これは便利だ・・・。
というか、なぜ今まで知らなかったんだ・・・。