ajaxで追加した要素へのイベントセット #JavaScript

最近、フロントエンドの技術の進化とともにajax通信を行った後にリアルタイムでviewをレンダリングしていくなどjavascriptでリッチなユーザー体験をするようなサイトが多くなっています。

そうなると今までのjqueryの使い方では対応できない場合などがあります。
今回はクリックなどのイベント付与に関してまとめました。

まず以下は基本となるhtmlコードです。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>box</title>
</head>
<body>
  <div id="contant">
    <div class="box js-box"></div>
  </div>
  <script src="./js/index.js"></script>
</body>
</html>

普通のクリックイベントのセット

.js-boxをクリックしたら何かしたい！（ここではconsoleに「boxをクリックしました！」と出す。）の場合以下のように書く

index.js



$('.js-box').on('click',function(){
  console.log('boxをクリックしました！');
});

しかし、この.js-boxというcssのクラスがついた要素がjavasacriptなどによって、ページのロード終了後（jsのイベントセット後）に追加された場合、
上記コードではconsole.log(‘boxをクリックしました！’)が動きません。

ajaxで追加した要素に対するクリックイベントの登録

この場合は、親要素の下のクラスという指定の仕方をするとうまく動くようになります。

index.js

$('#content').on('click', '.js-box', function(){
  console.log('boxをクリックしました！');
});

という風に.on()の２つ目の引数にクリックした時に何かをしたいクラス、.onを設定する部分に親要素を追加してあげましょう！
こうすると.js-boxをクリックするとconsoleが出るようになります。

同じ要素に複数のイベントをセットしたい

.js-boxにfocusした時にもイベントをセットしたいとすると

index.js

$('.js-box').on('focus',function(){
  console.log('boxをフォーカスしました！');
});

こう書かなければならず、二つ合わせると

index.js

$('.js-box').on('click',function(){
  console.log('boxをクリックしました！');
});
$('.js-box').on('focus',function(){
  console.log('boxをフォーカスしました！');
});

こう書かなければなりません。
もう無駄ですねマジで無駄です。

この場合２つは統一することが出来て

index.js

$('.js-box').on({
  'click': function(){
    console.log('boxをクリックしました！');
  },
  'focus': function(){
    console.log('boxをフォーカスしました！');
  }
});

と書くことができます！
スッキリですね！

ajaxで追加した要素に複数のイベントをセットしたい

ajaxで追加した要素にイベントをセットしたい場合は

index.js

$('#content').on('click', '.js-box', function(){
  console.log('boxをクリックしました！');
});

このように書くことが出来ましたが２番目の引数に対象の要素を入れたいのに入れる場所がありません！
この場合は、一番最後に追加してあげて

index.js

$('#content').on({
  'click': function(){
    console.log('boxをクリックしました！');
  },
  'focus': function(){
    console.log('boxをフォーカスしました！');
  }
}, '.js-box');

こうすることで複数のイベントをセットすることができます。

余談ですが

index.js

$('body').on('click', '.js-box', function(){
  console.log('boxをクリックしました！');
});

body配下の.js-boxと指定すれば全部で動きそうですが、この記述だとiphoneで反応しません。

何かの参考になれば幸いです。