jQuery on() と click()の違い

nissy 70views 更新:2016年9月3日

clickイベントに紐づけている関数をon()かclick()のどちらかに統一して記述しようとしたときに、ふと気になったのでハックに残しておきます。

 <input type="button" id="hoge" value="button">
  <script>
    $(function(){

      // 新しい要素の追加
      $('#generate').click(function(){
        $('#hoge').after('<input type="button" id="hogehoge" value="click">');
      });

      // clickされた時の処理①
      $('#hogehoge').click(function(){
        alert('click!!');
      });

      // clickされた時の処理②
      $(document).on('click', '#hogehoge', function(){
        alert('on!!');
      });

    });
  </script>

以上のコードにおいて、いっけん処理①も②も同じ処理のように見えます。しかし、実際有効な処理は処理②のほうだけみたいです。 ここで、以下のon()とclick()の違いが重要になってきます。
click() : ページロード時に存在する要素にイベントを付与して、その後動的に追加されたものには有効でない。
on() : ページロード時後、動的に追加された要素にもイベント付与してくれる。
以上の違いを理解していると、多少コードが長くなったとしてもon()を使ったほうがエラーの危険性は少なくなりそうです。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません