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

例えば

【普通のクリックイベントのセット】
こういうhtmlがあって、.js-boxをクリックしたら何かしたい!(ここではconsoleに「boxをクリックしました!」と出す。)とすると下のように書きます。

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

【ajaxで追加した要素に対するクリックイベントの登録】
この場合は、親要素の下のクラスという指定の仕方をするとうまく動くようになります。
上記のhtmlの場合

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

【同じ要素に複数のイベントをセットしたい】
.js-boxにfocusした時にもイベントをセットしたいとすると

と書かなければならず、2つ合わせると

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

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

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

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

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

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

参考になればぜひ!

スポンサーリンク