jQuery：“on”单击事件在表中不起作用[重复]

Question

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

我有一个动态表：

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

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 2

您的选择器正在寻找

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

选择器中的空格正在寻找i 的子代，而不是i 本身。 id 也必须是唯一的，因此您不能多次使用相同的 id，因此请将其设为类名。

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

并更改选择器

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

Answer 3

您需要定位tr i#delete 而不是tr i #delete。目前您的目标是i 标签的子标签，而您需要使用id 属性值为“delete”的i 标签。

$("#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 4

尝试改变这一行：

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

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