jQuery - индекс продолжает сбрасываться

Question

У меня есть таблица с большим количеством данных, и по некоторым причинам индекс input после каждого <td> </td> продолжает сбрасываться. Для этого я создал эту функцию

$('.custom-input').each(function(index) {
   $(this).attr('data-index', index);
});

Но на "функции изменения", когда я пытаюсь ее использовать, она не работает.

Мой текущий код:

$('.custom-input').each(function(index) {
   $(this).attr('data-index', index);
});

$('.custom-input[data-index=" '+index+' "]').on('change', function() {
   alert($(this).index());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<tr>
  <td>
     <input class="custom-input" type="text" value="0">
     <input class="custom-input" type="text" value="0">
     <input class="custom-input" type="text" value="0">
  </td>
  <td>
     <!-- The index for the next input should not be reset -->
     <input class="custom-input" type="text" value="0">
     <input class="custom-input" type="text" value="0">
     <input class="custom-input" type="text" value="0">
  </td>
</tr>

Answer 1

Событие изменения не работает, потому что вы пытаетесь присоединить его к каждому указанному c элементу с помощью индексной переменной, которая не существует. Я не знаю цели того, что вы делаете, но вы должны прикрепить событие ко всем .custom-input элементам. Кроме того, я бы предложил использовать событие input вместо change.

Событие input срабатывает, когда значение элемента <input>, <select> или <textarea> Изменено.

Событие изменения запускается для элементов <input>, <select> и <textarea>, когда изменение значения элемента совершается пользователем. В отличие от входного события, событие изменения не обязательно вызывается при каждом изменении значения элемента.

$('.custom-input').each(function(index) {
   $(this).attr('data-index', index);
   console.log("data-index set to: " + $(this).attr('data-index'));
});

$('.custom-input').on('input', function() {
   alert($(this).index());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
  <td>
     <input class="custom-input" type="text" value="0">
     <input class="custom-input" type="text" value="0">
     <input class="custom-input" type="text" value="0">
  </td>
  <td>
     <!-- The index for the next input should not be reset -->
     <input class="custom-input" type="text" value="0">
     <input class="custom-input" type="text" value="0">
     <input class="custom-input" type="text" value="0">
  </td>
</tr>

Answer 2

Разве вы не должны удалять пробелы вокруг индекса в этом jquery селекторе? как это:

$('.custom-input[data-index="'+index+'"]').on('change', function() {
   alert($(this).index());
});