【web開発 JQuery】動的に用意した要素にイベントを追加

躓き

<a class="anker" href="#">anker0</a>

こちらはHTMLで処理前に用意した要素・

let string = array("anker1","anker2","anker3");
for (let i=0; i<3; i++){
  $('.class').append('<li><a class="anker" href="#">'+string[i]+'</a></li>');
}

こちらはJavaScriptで動的に用意した要素。

$('.class').on("click", function(e){ /* 処理 */});

上で用意した要素全てにclickイベントを追加したつもりが、JavaScriptで動的に用意した要素に対してはclickイベントは機能しなかった。

解決策

$(document).on("click", ".anker", function(e){ /* 処理 */ });

こうすることで、動的に用意した要素にもclickイベントを追加することができた。

onメソッドについて

基本形

.on( events [, selector ] [, data ], handler )

引数	データ型	説明
events	String	半角スペース区切りでイベントタイプ("click"など)とoptional namespaces("keydown.myPlugin"など)を単数もしくは複数設定可能
selector	String	選択された要素の子孫要素に対してイベントデリゲートできる
data	Anything	イベントハンドラに渡したいデータをハッシュで指定できる。
handler	Function	eventsが起きたタイミングで実行される機能

events

基本的な使い方は省略するが、連想配列を使用しイベント毎に機能を付与できるのは便利。

$('.foo').on({
  'mouseenter': function(){ /* 処理 */ },
  'mouseleave': function(){ /* 処理 */ }
});

selector

こちらは子要素で発生するイベントが親要素に次々に伝搬するイベントバブリングというJavaScriptの特徴を利用した設定方法であるイベントデリゲートを利用してイベントを付与する方法。動的に用意された要素に対しても付与できること、親要素に設定するためメモリを節約できることのメリットがある。

$("ul").on("click","li",function(){ /* 処理 */ });

data

event.dataに引数のdataを格納することができる。

for (let i = 0; i < 3; i++) {
  $('button').eq(i).on('click', { value: i }, function(e){
    alert(e.data.value + '番目のボタンをクリックしました');
  });
}

参考URL

jQuery APIドキュメント（公式）
【jQuery】onメソッドの使用方法