jQuery の .live() の代わりは .on()

このエントリーをはてなブックマークに追加

jQuery1.7以降は `.live()` が `.on()` に統合され、1.9 以降は廃止されている。しかし、時折この .live() を使いたいがためなのか、そのためだけに廃止前の 1.8 を使うなんてケースがあったので、結構いまさらだけど改めて確認。

.live() の代わりは .on()

.live() が使えた頃は、下記のような書き方だった

$('selector').live('click', function () {
  // クリックした時の処理
});

しかし、 .on() になってからは記述方法が変わっている。

$(document).on('click', 'selector', function () {
  // クリックした時の処理
});

ちなみに、 .on() で .live() の振る舞いをさせて見た時のサンプルは下記のようになる。 下のサンプルでは、クリックすると要素が追加され、その追加した要素でもクリックをすると同じように要素が追加される動作をする。 .click() などでイベントを最初につけるだけでは、追加された要素では動かないが、この記述にすることで、追加された要素でもイベントが発生する。

.on() で .live() の振る舞いをするサンプル

JavaScript

$(document).on('click', '.addButton', function () {
  $(this).after('<button class="addButton">クリックで要素追加</button>');
});

サンプル

参照：