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

差分

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

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

--- プログラム言語:javascript_jquery:イベント [2020/08/19 12:12]
humolife [input]
+++ プログラム言語:javascript_jquery:イベント [2021/04/21 15:40]
humolife
@@ 行 1: / 行 1: @@
 ====== イベント ======
+===== 追加された要素でもイベントを発火させる書き方 =====
+以下の例では、ボタンを押すことで追加された li でも on lick 時のイベントを発火できるようにしています。
+<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>

プログラム言語/javascript_jquery/イベント.txt · 最終更新: 2021/04/21 15:41 by humolife