プログラム言語:javascript_jquery:イベント

差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

--- プログラム言語:javascript_jquery:イベント [2020/08/19 12:11]
humolife
+++ プログラム言語:javascript_jquery:イベント [2021/04/21 15:41] (現在)
humolife [追加された要素でもイベントを発火させる書き方]
@@ 行 1: / 行 1: @@
 ====== イベント ======
+===== append などで追加された要素に対してもイベントを発火させる方法 =====
+以下の例では、ボタンを押すことで追加される li にも on click 時のイベントを発火できるようにしています。
+<code>
+<button class="btn-add">add</button>
+<ul>
+    <li>test</li>
+</ul>
+<script>
+$(function() {
+  let num = 1;
+  $('.btn-add').on('click', function(){
+    $('ul').append('<li>add ' + num + '</li>');
+    num ++;
+  });
+  $('ul').on('click', 'li', function(){
+    alert($(this).text());
+  });
+</script>
+</code>
+簡単に解説すると、li の親である ul に対して、click 時のイベント処理を設定しているので、ul 内に後から追加された要素についても click イベントを取得することができます。
 ===== click =====
 <code>
@@ 行 34: / 行 55: @@
 </code>
 ===== input =====
-入力があったらイベント発火。
+入力があったらイベント発火。\\
+keyup やコピペでもイベントが発火するため、入力があったらリアルタイムに処理できる。
 <code>
 <input type="text" name="search">

プログラム言語/javascript_jquery/イベント.1597806682.txt.gz · 最終更新: 2020/08/19 12:11 by humolife