このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
プログラム言語:javascript_jquery:イベント [2020/08/19 12:12] humolife [input] |
プログラム言語:javascript_jquery:イベント [2021/04/21 15:41] humolife [追加された要素でもイベントを発火させる書き方] |
||
---|---|---|---|
行 1: | 行 1: | ||
====== イベント ====== | ====== イベント ====== | ||
+ | ===== append などで追加された要素に対してもイベントを発火させる方法 ===== | ||
+ | 以下の例では、ボタンを押すことで追加される li にも on click 時のイベントを発火できるようにしています。 | ||
+ | < | ||
+ | <button class=" | ||
+ | <ul> | ||
+ | < | ||
+ | </ul> | ||
+ | < | ||
+ | $(function() { | ||
+ | let num = 1; | ||
+ | $(' | ||
+ | $(' | ||
+ | num ++; | ||
+ | }); | ||
+ | |||
+ | $(' | ||
+ | alert($(this).text()); | ||
+ | }); | ||
+ | </ | ||
+ | </ | ||
+ | 簡単に解説すると、li の親である ul に対して、click 時のイベント処理を設定しているので、ul 内に後から追加された要素についても click イベントを取得することができます。 | ||
===== click ===== | ===== click ===== | ||
< | < |