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

0

У меня есть таблица с кнопкой, которая добавляет 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));
                });

           }
        );
Теги:
dom

2 ответа

0
Лучший ответ

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

0

Я думаю, что проблема была здесь [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));
            });

       }());
    );
  • 0
    На самом деле ему не нужно имя тега. [name^="Count_"] сам селектор.
  • 0
    Вы освобождаете право. Может быть, функция не выполняется неумышленно

Ещё вопросы

Сообщество Overcoder
Наверх
Меню