jQueryのonをliveの代わりに使う場合の書き方

jQueryのliveは1.9以降使えないので代わりにonを使おうと思ったのですが、その使い方を間違えて覚えてしまっていたのでメモしておきます。

間違った使い方

$('.hoge').on('click', function() {
  alert('liveの代替としては間違った使い方だよ');
});

この使い方では、onload時点で存在するDomに対してclickイベントのバインドはできますが、後で動的に挿入されたDomにはバインドされません。
動的に挿入したDomにもバインドされるようにするには以下の様な使い方をします。

正しい使い方

$(document).on('click', '.hoge', function() {
  alert('liveの代替としてはこうする');
});

上記のように、セレクタをonの第二引数として指定します。
これにより、document配下が監視され.hogeなDomが挿入された場合にイベントがバインドされるようになります。
本当は監視範囲を限定するためにjQueryオブジェクトを$('.fuga')などと絞るようにした方が良いです。


liveの置き換えがうまくいかない人はお試しください。

jQuery レッスンブック jQuery2.X/1.X対応

jQuery レッスンブック jQuery2.X/1.X対応