1
1

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.

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

Last updated at Posted at 2019-07-10

躓き

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

1
1
0

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
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?