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>

现在我想在 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*/
  });
});

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

我认为这是因为我们需要有不同的身份？

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

Answer 1

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

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

<button class="deleteButton"/>

脚本

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

  });

Answer 2

问题与单个页面中的多个元素的ID相同。当发生这种情况时，浏览器只查找它的第一个实例，并且永远不会继续寻找另一个实例， 这就是人们应该理解每个元素的ID应该是唯一的 的原因。

改为改为班级名称：

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

和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*/
  });
});

Answer 3

首先请注意，id已知是唯一的，如果您需要为两个button设置点击事件，则可以使用class来选择button，因此请尝试要遵循这些标准，id是唯一的selector，而class是多个selector。

具有相同id的按钮的jquery click事件

3 个答案: