Предупреждение несколько столбцов с помощью javascript

Question

Я пытаюсь сделать alert fields. Вот мой HTML

<table width="100%" id="example1" class="table table-bordered table-striped"> 
    <tr> 
     <td> Nip </td> 
     <td> Nama Lengkap </td> 
    </tr> 
    <tr id='ke0'> 

     <td> <input class="form-control nipnya" type="text" name="nip[]" /> </td> 

     <td> <input class="form-control namanya" type="text" name="namalengkap[]" /> </td> 
    </tr> 
    <tr id='ke1'> 

    </tr> 
</table> 
<div> 
    <a id="add_row" class="btn btn-success pull-left">Tambah Baris Baru</a> &nbsp;&nbsp;&nbsp; 
    <a id="delete_row" class="pull-left btn btn-danger">Hapus Baris</a> 
</div> 

и у меня есть этот Jquery

$(document).ready(function() { 
    $("#rmnya").change(function() { 
     $('#td11').html($("#rmnya").val()); 
    }); 
    var i = 1; 
    $("#add_row").click(function() { 
     $('#ke' + i).html('<td><input class="form-control nipnya" type="text" name="nip[]" /> </td>' + 
      '<td> <input class="form-control namanya" type="text" name="namalengkap[]" />' + 
      '</td>'); 
     $('#example1').append('<tr id="ke' + (i + 1) + '"></tr>'); 
     i++; 
    }); 
    $("#delete_row").click(function() { 
     if (i > 1) { 
      $("#ke" + (i - 1)).html(''); 
      i--; 
     } 
    }); 
}); 

Как вы можете видеть из моего сценария. Существует только одна строка <tr></tr>. Я могу предупредить об этом, если это только одна строка. Но при нажатии Tambah Baris Baru появляется еще одна строка. Я не могу предупредить об этом. Вот мой другой Javascript

$(".nipnya").change(function(){ 
      $('.nipnya').each(function(i, obj) { 
       alert($('.nipnya').val()); 
      }); 
    }); 

Таким образом, вы можете сказать мне, как предупредить after onchange в каждом поле, показывая динамически.

Вот моя скрипка https://jsfiddle.net/spc5884w/

Извините за мой плохой английский.

Answer 1

В настоящее время то, что вы используете, называется «прямой» привязкой, которая будет прикрепляться только к элементу, который существует на странице, когда ваш код делает привязку к событию.

При создании элементов динамически необходимо использовать Event Delegation с использованием метода делегированных событий .on().

Общий синтаксис

$(staticParentElement).on('event','selector',callback_function) 

Пример

$('table').on('click', ".nipnya", function(){ 
    alert($(this).val()); 
}); 

DEMO