[解決済み] なぜclick()ではなく、jQuery on()なのか？

疑問点

現在、jQueryでクリック時に何かしたい場合、次のようにします。

$(".close-box").click( function() {
    MoneyBox.closeBox();
    return false;
});

ある人がプロジェクトで持っているコードを見ていたら、こんな風にやっていたのですが...。

$(".close-box").live("click", function () {
    MoneyBox.closeBox();
    return false;
});

私が見た限りでは、live()関数を使っている以外は同じことをしているように見えますが、これは現在では非推奨となっており、jQueryのドキュメントでは on() を使うようにと書かれていますが、どちらにしても、なぜ最初の例の代わりにlive/on()を使うのでしょうか？

どのように解決するには？

動的に生成された要素 (たとえば AJAX 呼び出しによるもの) があるため、以前に同じ要素セレクタにバインドされていた同じクリックハンドラを使用したい場合、次のようにしてクリックイベントを "delegate" します。 on() でセレクタ引数を指定します。

デモをするために

http://jsfiddle.net/AJRw3/

on() と同義である可能性もあります。 click() と同義です。

$('.elementClass').click(function() { // code 
});

とは同義です。

$('.elementClass').on('click', function() { // code
});

を持つすべての要素に一度だけハンドラを追加するという意味で、クラス elementClass . もし、新しい elementClass から来る、例えば $('<div class="elementClass" />') から来る場合、ハンドラはその新しい要素にバインドされないので、そうする必要があります。

$('#container').on('click', '.elementClass', function() { // code
});

仮定の話 #container は .elementClass の祖先である