【.on()のすすめ】DOM生成した要素に対してクリックなどのイベントを実行する方法

Web2018年3月21日

jQueryでクリックイベントによる処理を行う際、click(function(){～の書式で実装することがよくあると思いますが、これがDOM生成した要素の場合うまく処理が効かないことがあります。そんな時、.on()メソッドを使うことで大体解決できますので、本記事ではこの.on()メソッドの使い方についてご紹介させていただきたいと思います。

サンプルコード

DOM生成した要素にイベントが実行できないパターン

$(function(){
  'use scrict';

  //DOM生成した要素にイベントが実行できない
  $('div.hoge').append('<ul id="hoge-01" class="list-link-01"><li><a href="#">jsでページ読み込み時にDOM生成されたリンク</a></li></ul>');
  $('div.hoge ul#hoge-01 li a').click(function(){
    $('div.hoge ul#hoge-01').after('<ul id="hoge-02" class="list-link-01"><li><a href="#">クリックでDOM生成されたリンク</a></li></ul>');
    return false;
  });
  $('div.hoge ul#hoge-02 li a').click(function(){
    alert('クリックしてもアラート表示されない');
    return false;
  });

});

サンプルコード

DOM生成した要素にイベントが実行できるパターン

$(function(){
  'use scrict';

  //DOM生成した要素にイベントが実行できる
  $('div.moge').append('<ul id="moge-01" class="list-link-01"><li><a href="#">jsでページ読み込み時にDOM生成されたリンク</a></li></ul>');
  $('div.moge ul#moge-01 li a').click(function(){
    $('div.moge ul#moge-01').after('<ul id="moge-02" class="list-link-01"><li><a href="#">クリックでDOM生成されたリンク</a></li></ul>');
    return false;
  });
  $(document).on("click","div.moge ul#moge-02 li a",function(){
    alert('クリックするとアラート表示される');
    return false;
  });
  
});

DOM生成した要素にイベントが実行できるパターン（第二引数を省略）

$(function(){
  'use scrict';

  //DOM生成した要素にイベントが実行できる（第二引数を省略）
  $('div.fuga').append('<ul id="fuga-01" class="list-link-01"><li><a href="#">jsでページ読み込み時にDOM生成されたリンク</a></li></ul>');
  $('div.fuga ul#fuga-01 li a').click(function(){
    $('div.fuga ul#fuga-01').after('<ul id="fuga-02" class="list-link-01"><li><a href="#">クリックでDOM生成されたリンク</a></li></ul>');
    $('div.fuga ul#fuga-02 li a').on("click",function(){
      alert('クリックするとアラート表示される');
      return false;
    });
    return false;
  });

});

※jQueryを読み込んでいる場合のスクリプトとなります

解説

DOM生成した要素にイベントが実行できないパターン

.click()は、ページ読み込み時に存在する要素にイベントを付与します。ページ読み込み後、クリック等何かしらのアクションにより動的に生成された要素には有効ではありません。そのため、動的に追加した「$('div.hoge ul#hoge-02 li a')」をクリックしてもアラートは表示されない、ということです。return falseも機能しません。

DOM生成した要素にイベントが実行できるパターン

そこで、.on()メソッドの出番です。これを利用することで、ページ読み込み後に動的に追加された要素にもイベントが付与されます。.on()メソッドの第一引数にイベント名、第二引数にセレクタを指定することで動作します。ここでは$(document)により親要素に対するイベントハンドラを指定することで、子要素である「div.moge ul#moge-02 li a」をセレクタ指定しています。

DOM生成した要素にイベントが実行できるパターン（第二引数を省略）

.on()メソッドを使っている点は同じですが、こちらは第二引数を省略しかつセレクタに対して.on()を当てる方法です。これにより、対象の要素のみにイベントハンドラを追加することが可能です。サンプルコードでは、ページ読み込み時のリンク「$('div.fuga ul#fuga-01 li a').click(～」内に記述することで、DOM生成した要素にもイベントを付与しています。