Как не дать идентификатору данных вернуть тот же идентификатор элемента таблицы из цикла php

Question

Я хочу обновить запись, используя AJAX, но когда я нажимаю кнопку для edit строки, я получаю ту же data-id первой строки в элементе table.

<table>
  <!-- this data inside php foreach loop displayed via ajax -->
  <tr>
    <td> <a href="<?= $row->id; ?>" id="edit_btn" data-id="<?= $row->id; ?>">edit</a></td>
    <td> <a href="<?= $row->id;?>'" id="delete_btn" data-id="<?= $row->id; ?>">delete</a></td>
  </tr>
</table>

$(function($) {
  edit();
})(jQuery);

function edit() {
  $(document).on('click', '#edit_btn', (e) => {
    e.preventDefault();
    var aid = $('#edit_btn').attr('data-id');
    // var aid = $('#edit_btn').data('id');
    alert(aid);
  });
}

Answer 1

Основная проблема в вашем коде заключается в том, что вы присваиваете всем элементам вашего l oop одинаковые id, что недопустимо. id атрибуты должны быть уникальными в DOM. Вместо этого вы должны использовать класс для присоединения обработчиков событий, а затем использовать ключевое слово this в обработчике событий, чтобы получить ссылку на элемент, вызвавший событие. Последний пункт означает, что вам нужно удалить функцию стрелки и использовать вместо нее анонимную.

При этом в вашем коде есть другие проблемы, которые необходимо устранить. Во-первых, обработчик события document.ready не является IIFE. Удалить (jQuery) с конца. Кроме того, используйте data() для получения атрибутов данных, а не attr(). Наконец, не используйте alert() для отладки, так как он приводит к типам данных. Вместо этого используйте console.log().

jQuery(function($) {
  edit();
});

function edit() {
  $(document).on('click', '.edit_btn', (e) => {
    e.preventDefault();
    var aid = $(e.target).data('id');
    console.log(aid);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <!-- inside your loop ... -->
  <tr>
    <td><a href="#1" class="edit_btn" data-id="1">edit</a></td>
    <td><a href="#1" class="delete_btn" data-id="1">delete</a></td>
  </tr>
  <tr>
    <td><a href="#2" class="edit_btn" data-id="2">edit</a></td>
    <td><a href="#2" class="delete_btn" data-id="2">delete</a></td>
  </tr>
  <tr>
    <td><a href="#3" class="edit_btn" data-id="3">edit</a></td>
    <td><a href="#3" class="delete_btn" data-id="3">delete</a></td>
  </tr>
</table>

Если вы предпочитаете использовать функцию стрелки, то вместо this вам нужно будет использовать e.target:

$(document).on('click', '.edit_btn', (e) => {
  e.preventDefault();
  var aid = $(e.target).data('id');
  console.log(aid);
});

Answer 2

Вы должны получить идентификатор данных, используя метод данных :

var aid = $('#edit_btn').data('id');

Предупреждение

Идентификатор должен быть уникальным , особенно потому, что это вызовет проблемы в JavaScript и CSS при попытке взаимодействия с этими элементами.

Answer 3

1. Вы не можете иметь несколько элементов с одинаковым идентификатором. jQuery всегда будет использовать первый найденный.
2. Вы можете установить класс для всех ваших кнопок редактирования / удаления и использовать его для регистрации события щелчка.

3. Вы можете использовать $(this) внутри функции обратного вызова для управления только элементом, по которому щелкнули

   <td><a class="edit_btn" data-id="<?= $row->id; ?>">edit</a></td>
   <td><a class="delete_btn" data-id="<?= $row->id; ?>">delete</a></td>
   
   $(document).on('click','.edit_btn', function(e) {
       e.preventDefault();
       var aid = $(this).data('id');
       alert(aid);
   });