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

Question

我想使用 AJAX 更新记录，但是当我单击按钮edit该行时，我获得了与table元素中第一行相同的data-id 。

<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>

如果你更喜欢使用箭头函数，那么你需要使用e.target来代替this ：

$(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's Must Be Unique ，特别是因为当您尝试与这些元素交互时，它会导致JavaScript和 CSS 出现问题。