jQuery1.9での動的に生成した要素に対するイベント指定

jQuery1.9で早速ハマったことをメモっておきます。

仕事でMVC フレームワークを使ってサーバーをJSON吐き出し機にして

動的にコンテンツを表示したりするときがあります。

ですが動的に追加された要素に対してイベントを追加しようとしてもできません。

以前までなら .live()関数で指定可能だったのですが・・・。

jQuery1.9では.live()関数が廃止されました。

1.7から追加された .on() 関数を使用するように変更されました。

と入っても前から推奨は .on()関数なのですが。

個人的に可読性が下がるかなと思って .live()派でした。

そもそも.live()は将来的に追加されつ要素（動的に追加される）に対しても指定ができる関数でした。

以前はこんな感じに

$('#hoge').live('click',function(){

    alert("動的に追加したコンテンツ。");

});

それを .on()関数に書き換えると

$(document).on('click','#hoge',function(){

　　alert("動的に追加したコンテンツ。");

});

このようにdocument要素に対して「.on()」を実行し、引数にセレクタを渡します。

慣れたらわかるんですけど最初は読みにくいんよね。

すると動的に生成された要素に対してもイベントをつけることができます。

Sync all