У меня есть таблица с кнопкой, которая добавляет 5 строк с ячейками к таблице при нажатии. Я хочу связать событие с ячейками в пятом столбце таблицы. Все эти ячейки называются "Count_", за которым следует номер строки. Итак, ячейка в строке 0:
<td name="CountCell_0">
<input type="text" name="Count_0">
</td>
И я пытаюсь обновить ввод с именем Count_X (где X - номер строки). Связывание работает для ячеек, которые первоначально были на странице. Однако событие не запускается для ячеек, которые были добавлены с помощью кнопки.
Ниже приведен пример ячейки, которая была динамически добавлена:
<td>
<input type="text" name="Count_348">
</td>
Вот мое событие JQuery:
$(document).ready(
function() {
$(document).on('change','[name^="Count_"]',function() {
console.log('here'); //not triggering on dynamic cell
var cell = $(this).attr('name');
var idx = cell.split('_')[1];
var amount = $(this).val() * $('[name="AvgCost_' + idx + '"]').html();
$('#ExtendedCostCell_' + idx).html(amount.toFixed(2));
});
}
);
Я переместил функцию за пределы документа, и теперь она запускается в динамических строках.
Я думаю, что проблема была здесь [name ^ = "Count_"] 'вам нужен селектор, поэтому измените этот вход [name ^ = "Count_"]', и анонимная функция не будет выполнена
$(document).ready(
(function() {
$(document).on('change','input[name^="Count_"]',function() {
console.log('here'); //not triggering on dynamic cell
var cell = $(this).attr('name');
var idx = cell.split('_')[1];
var amount = $(this).val() * $('[name="AvgCost_' + idx + '"]').html();
$('#ExtendedCostCell_' + idx).html(amount.toFixed(2));
});
}());
);
[name^="Count_"]
сам селектор.