如何避免data-id从php循环返回表元素的相同id

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

您的代码中的主要问题是因为您将循环中的所有元素都赋予相同的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

1. 您不能有多个具有相同 ID 的元素。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);

});

Answer 3

您应该使用data 方法检索数据 ID ：

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

警告

ID 必须是唯一的，特别是因为当您尝试与这些元素交互时，它会导致JavaScript和 CSS 出现问题。