ゆーものメモ帳

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

====== イベント ======
===== 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>
<button type="button" class="btn" data-id="1">
<button type="button" class="btn" data-id="2">
<button type="button" class="btn" data-id="3">

<script type="text/javascript">
$(function() {
  $('.btn').on('click', function(){
    console.log($(this).data('id'));
  });
});
</script>
</code>

===== change =====
入力内容が変更されたらイベント発火。\\
入力フォームからフォーカスが外れた段階でイベントが発火する。\\
入力があったらリアルタイムにイベント発火させたい場合は、次で紹介する input イベントを利用する。
<code>
<input type="file" class="file" name="file_1" data-num="1">
<input type="file" class="file" name="file_2" data-num="2">
<input type="file" class="file" name="file_3" data-num="3">

<script type="text/javascript">
$(function() {
  $('.file').on('change', function(){
    console.log($(this).data('num'));
    console.log($(this).val());
  });
});
</script>
</code>
===== input =====
入力があったらイベント発火。\\
keyup やコピペでもイベントが発火するため、入力があったらリアルタイムに処理できる。
<code>
<input type="text" name="search">
$(function() {
  $(document).on('input', 'input[name=search]', function(){
    console.log($(this).val())
  })
})
</code>

ゆーものメモ帳

ユーザ用ツール

サイト用ツール

ページ用ツール