脱jQuery .live() $(document).on()

後からドキュメントに追加した要素にもイベントを付けることが出来る live メソッドのネイティブ書き換えです。

詳しくは 脱jQuery その1 をご覧ください。

without-jquery

最新版では既に .live() は削除されていて、その代わり .on() を使って同様の効果を出すことが出来ます。

.live()、$(document).on()

jQuery

$("#button").live("click", function() {
    alert("クリックされました");
});
$(document).on("click", "#button", function() {
    alert("クリックされました");
});

書き換え JavaScript

document.addEventListener("click", function(event) {
    if(event.target.id === "button") {
        alert("クリックされました");
    }
}, false);

document に対してイベントを付けてクリックされたものの id が button なら「クリックされました」とアラートが出ます。これで後からこの要素が追加されたとしてもイベントを付けることが出来ます。

ただこれでは id 以外の要素に付けたい場合はこれだとうまく行きませんので、class の要素にイベントを付けたい場合も紹介です。

jQuery

$(".button").live("click", function() {
    alert("クリックされました");
});
$(document).on("click", ".button", function() {
  alert("クリックされました");
});

書き換え JavaScript

document.addEventListener("click", function(event) {
    if(event.target.classList.contains("button")) {
        alert("クリックされました");
    }
}, false);

.button という class を持った要素がクリックされた時アラートが出ます。classList を使っているため IE10 以上の対応となります。

参考：classList

id であれ class であれ if で判定して、正しければイベントを起こすという形で対応が出来ます。

まとめ

jQueryJavaScript
$("#A").live("B", function() {
  //イベント内容
});		document.addEventListener("B", function(event) {
  if(event.target.id === "A") {
    //イベント内容
  }
}, false);
$(document).on("B", ".A", function() {
  //イベント内容
});		document.addEventListener("B", function(event) {
  if(event.target.classList.contains("A")) {
    //イベント内容
  }
}, false);