Событие щелчка jQuery не работает для динамически создаваемого поля формы

Question

Я создаю динамическое поле ввода, используя строку таблицы

var i = 1;
$('#add').click(function(){  
  i++; 
  $('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><input type="text" id ="lable" name="lable" ></tr>');  
});
     
$('#lable').click(function(){
  alert('called');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" id="dynamic_field">  
  <td colspan="2">
    <button type="button" name="add" id="add" class="btn btn-success">Add Lable</button>
  </td>
</table>

но это не вызов оповещения

Answer 1

Поскольку вы создали входные данные динамически, вы должны использовать делегирование события . Это значит использовать

$(document).on("click", '#lable', function(){

Вместо

$('#lable').click(function(){

Обратите внимание, что в html не может быть повторяющегося атрибута id. Поэтому используйте вместо него класс (.lable).

var i = 1
$('#add').click(function(){  
  i++; 
  $('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><input type="text" class="lable" name="lable"></tr>');  
});

$(document).on("click", '.lable', function(){
  alert('called');
});   

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" id="dynamic_field">  
  <tr>
    <td colspan="2">
      <button type="button" name="add" id="add" class="btn btn-success">Add Lable</button>
    </td>
  </tr>
</table>