イベント

以下の例では、ボタンを押すことで追加される li にも on click 時のイベントを発火できるようにしています。

<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>

簡単に解説すると、li の親である ul に対して、click 時のイベント処理を設定しているので、ul 内に後から追加された要素についても click イベントを取得することができます。

<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>

入力内容が変更されたらイベント発火。
入力フォームからフォーカスが外れた段階でイベントが発火する。
入力があったらリアルタイムにイベント発火させたい場合は、次で紹介する input イベントを利用する。

<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>

入力があったらイベント発火。
keyup やコピペでもイベントが発火するため、入力があったらリアルタイムに処理できる。

<input type="text" name="search">
$(function() {
  $(document).on('input', 'input[name=search]', function(){
    console.log($(this).val())
  })
})