41
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

最近、フロントエンドの技術の進化とともに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()の2つ目の引数にクリックした時に何かをしたいクラス、.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をフォーカスしました!');
});

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

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

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をクリックしました!');
});

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

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で反応しません。

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

41
41
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
41
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?