このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
プログラム言語:javascript_jquery:イベント [2020/08/19 12:10] humolife |
プログラム言語: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 ===== | ||
< | < | ||
行 16: | 行 37: | ||
===== change ===== | ===== change ===== | ||
- | ==== change イベント ==== | ||
入力内容が変更されたらイベント発火。\\ | 入力内容が変更されたらイベント発火。\\ | ||
入力フォームからフォーカスが外れた段階でイベントが発火する。\\ | 入力フォームからフォーカスが外れた段階でイベントが発火する。\\ | ||
行 34: | 行 54: | ||
</ | </ | ||
</ | </ | ||
- | ==== input イベント | + | ===== input ===== |
- | 入力があったらイベント発火。 | + | 入力があったらイベント発火。\\ |
+ | keyup やコピペでもイベントが発火するため、入力があったらリアルタイムに処理できる。 | ||
< | < | ||
<input type=" | <input type=" |