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