Как правильно делегировать js для множества динамических строк?

Question

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

У этих полей есть чекбокс, при нажатии на который в базу летит 1 или 0 в зависимости от состояния чекбокса

Использую делегирование js, но оно работает только на 1 элемент, т.е его сохраняет, а остальные игнорирует

Код js:

    let id = $('form').data('id');

    document.getElementById(id).addEventListener("click", event => {
        if (event.target.className === "check") {
            document.getElementById(id).submit();
        }
    });

Строчка из таблицы

<td>
  <form method="post" action="{{ test.id }}/check" id="{{ test.id }}" 
  data-id="{{ test.id }}">
    <input class="check" type="checkbox" name="check"                                           
    {% if test.getChecked == 1 %}checked{% endif %}>
  </form>
</td>

Answer 1

Геттер .data - возвращает значение связанное с первым элементов в выборке.

Выражение $('form').data('id') вернет атрибут только для первой формы.

Для решения достаточно использовать методы jQuery для добавления обработчика

$('form').on('click', '.check', function(){
    this.submit();
});

БЛОГ НА HUSL

Как правильно делегировать js для множества динамических строк?

Ответы (1 шт):