javascript - jquery具有相同id的按钮的点击事件

Question

我有一个这样的表结构

<table>
  <c forEach var="item" items="${manyItems}">
    <tr>
       <td id="item1"> ${item.data1} </td>
       <td id="item2"> ${item.data2} </td>
       <td> <button id="deleteButton"/> </td>
    </tr>
  </c:forEach>
</table>

Now I want to add a click event to the deleteButton

在我的jquery中是这样的:

$(function() {
  $('#deleteButton').click(function() {
    var ele = $(this).parent();
    /* fetch the other <td> siblings of the #deleteButton */
    /* delete code goes here having an ajax query*/
  });
});

此代码仅删除表格的第一行，但不适用于任何其他行。

我相信这是因为我们需要有不同的 ID？

请指导我找到一个好的解决方案。

Answer 1

您正在创建重复的 ID，HTML 中的标识符必须是唯一的，这是预期的行为。

使用类，在下面的示例中，我已将 deleteButton 转换为 CSS 类，以便我们可以使用 Class Selector (".class")

<button class="deleteButton"/>

脚本

  $('.deleteButton').click(function() {
    var ele = $(this).parent();

  });