【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メソッドの使用方法