JQuery по нажатию кнопок функция инкрементно срабатывает

31 марта 2022, 05:30

Создаю в js таблицу, где в одной из колонок в каждой строке создаю кнопки.

<input class="buttons" value="Delete" onclick="delRowOfTable();" type="button">

Эти кнопки по нажатию, должны получить номер строки в которой они находятся:

function delRowOfTable() { 
  $(document).ready(function(){ 
    $('tr').one( 'click',function(){ 
      alert(this.rowIndex+1); 
    }); 
  }); 
}

Когда нажимаю одну из кнопок, всё срабатывает правильно и выдаёт правильный результат. Но когда нажимаю другую кнопку функция срабатывает два раза, т.е. алерт вылазит 2 раза, нажимаю 3ю кнопку - алерт вылазит 3 раза и т.д.
Как это пофиксить?

Добавил это в код, теперь всё отрабатывает по одному разу, вроде всё ок

 $( 'tr').unbind( "click" );

Answer 1

Обработчик событий нужно повесить только один раз, сразу после загрузки

HTML

<table>
  <tr line_number=1>
    <td>
      <input class="buttons delbutton" value="Delete" type="button">
    </td>
  </tr>
  <tr line_number=2>
    <td>
      <input class="buttons delbutton" value="Delete" type="button">
    </td>
  </tr>
  <tr line_number=3>
    <td>
      <input class="buttons delbutton" value="Delete" type="button">
    </td>
  </tr>
</table>

  $(document).ready(function(){
    $('.delbutton').on('click', delRowOfTable);
  });
   function delRowOfTable() {
     alert( $(this).parent().parent().index());
   }

https://jsfiddle.net/Poul_WWJD/g74fytqw