jQuery："on" 单击事件在 table 中不起作用

Question

我知道这个问题是重复的。我阅读了其他问题和答案，但没有得到任何结果。

我有动态table:

HTML

<table id="networklist" class="table table-hover">
    <thead>
    <tr>
        <th>name</th>
        <th>icon</th>
        <th>username</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
          // forech is here
        <tr data-rowid="@dto.Id">
         // more td
            <td>
                <i id="delete" data-id="@dto.Id" class="fa fa-trash" style="margin-left: 1em; cursor: pointer"></i>
                <i id="edit" data-id="@dto.Id" class="fa fa-pencil" style="cursor: pointer"></i>
            </td>
        </tr>

    </tbody>
</table>

JS

$("#networklist").on("click","tr i #delete",function () {
  debugger;

 var id = $(this).data("id");

});

我试过这个和许多其他选择器，但点击事件不起作用。我该如何解决这个问题？

更新：我在 delete 和 edit 中没有唯一 ID，我在 tr 中有。

Answer 1

尝试更改此行：

$("#networklist").on("click","tr #delete",function () {

因为你的选择器是错误的。 i 标签中没有 ID 为 #delete 的元素。你应该使用 class .delete 而不是 id 因为 id 在文档中应该是唯一的

Answer 2

您需要定位 tr i#delete 而不是 tr i #delete。目前您定位的是 i 标签的子级，而您需要定位 i 标签且 id 属性值为 "delete"。

$("#networklist").on("click", "tr i#delete", function() {
  alert('clicked!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<table id="networklist" class="table table-hover">
  <thead>
    <tr>
      <th>name</th>
      <th>icon</th>
      <th>username</th>
      <th></th>
    </tr>
  </thead>
  <tbody>

    <tr data-rowid="@dto.Id">
      <td>Chris</td>
      <td>My icon</td>
      <td>Tumbleweed</td>
      <td>
        <i id="delete" data-id="@dto.Id" class="fa fa-trash" style="margin-left: 1em; cursor: pointer"></i>
        <i id="edit" data-id="@dto.Id" class="fa fa-pencil" style="cursor: pointer"></i>
      </td>
    </tr>

  </tbody>
</table>

然而正如其他人所指出的，在您的场景中使用 id 属性是完全错误的。也许您应该重新访问您的代码并将其更改为如下所示：

$("#networklist").on("click", ".delete", function() {
  alert('clicked!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<table id="networklist" class="table table-hover">
  <thead>
    <tr>
      <th>name</th>
      <th>icon</th>
      <th>username</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr data-rowid="@dto.Id">
      <td>Chris</td>
      <td>My icon</td>
      <td>Tumbleweed</td>
      <td>
        <i data-id="@dto.Id" class="fa fa-trash delete" style="margin-left: 1em; cursor: pointer"></i>
        <i data-id="@dto.Id" class="fa fa-pencil edit" style="cursor: pointer"></i>
      </td>
    </tr>
  </tbody>
</table>

Answer 3

id 每个元素都必须是唯一的。所以使用 class 如下所示：-

演示示例：-

$("#networklist").on("click","tr i.delete ,tr i.edit",function () {
 var id = $(this).data("id");
   console.log(id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="networklist" class="table table-hover">
    <thead>
    <tr>
        <th>name</th>
        <th>icon</th>
        <th>username</th>
        <th></th>
    </tr>
    </thead>
    <tbody>

        <tr data-rowid="@dto.Id">
            <td>ABC</td>
            <td>ICON</td>
            <td>ALIVE</td>
             <td>
                <i data-id="1" class="fa fa-trash delete" style="margin-left: 1em; cursor: pointer">del</i>
                <i data-id="2" class="fa fa-pencil edit" style="cursor: pointer">edit</i>
            </td>
        </tr>
        <tr data-rowid="@dto.Id">
            <td>DEF</td>
            <td>ICON</td>
            <td>DIE</td>
             <td>
                <i data-id="3" class="fa fa-trash delete" style="margin-left: 1em; cursor: pointer">del</i>
                <i data-id="4" class="fa fa-pencil edit" style="cursor: pointer">edit</i>
            </td>
        </tr>

    </tbody>
</table>

Answer 4

您的选择器正在寻找

<tr><td><i><x id="delete"></i></td></tr>

选择器中的 space 正在寻找 i 的子项而不是 i 本身。此外，ID 必须是唯一的，因此您不能多次使用相同的 ID，因此请将其设为 class 名称。

<i data-id="@dto.Id" class="fa fa-trash delete" ...>

并更改选择器

$("#networklist").on("click","tr i.delete",function () {
  var id = $(this).data("id");
});

jQuery："on" 单击事件在 table 中不起作用

jQuery: "on" click event not working in table

javascript

jquery

click

jquery-selectors

jquery-events