Почему мое делегирование событий jQuery не работает должным образом?

#javascript #html #jquery

Вопрос:

Простой вопрос для кого-то, но я не могу его понять!

У меня есть некоторый jQuery, который добавляет строку в таблицу, но добавляемые поля ввода не имеют связанных с ними событий jQuery. Нажмите на первый ввод, и появится цифра 5. Добавьте строку, щелкните вновь созданную строку, и ничего не произойдет. Что я упускаю?

Вот скрипка.

HTML:

 <table id="TodayTable" border="1">
 <tr>
  <td class="start"> 
   <input type="text">
  </td>
 </tr>
</table>
 
<a href="#" class="addNewRow">Add New Row</a>
 

jQuery:

 $(".addNewRow").on('click',function()
{
 $("#TodayTable").append('<tr><td class="start"><input type="text"></td></tr>');
});

$(".start").on('click',function()
{ 
 $(this).find('input').val('5');
});
 

Ответ №1:

У вас есть правильная концепция, но вы ее не используете. Делегирование мероприятий.

Изменить:

 $(".start").on('click',
 

Для:

 $("#TodayTable").on('click', '.start',
 

ДЕМОНСТРАЦИЯ

 $(".addNewRow").on('click',function()
{
 $("#TodayTable").append('<tr><td class="start"><input type="text"></td></tr>');
});

$("#TodayTable").on('click','.start', function()
{ 
 $(this).find('input').val('5');
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="TodayTable" border="1">
 <tr>
  <td class="start"> 
   <input type="text">
  </td>
 </tr>
</table>
 
<a href="#" class="addNewRow">Add New Row</a>