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対応
- 作者: 山崎大助
- 出版社/メーカー: ソシム
- 発売日: 2014/09/19
- メディア: 単行本
- この商品を含むブログ (2件) を見る