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上拥有该ID。

Answer 1

尝试更改此行：

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

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

Answer 2

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

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

演示示例： -

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您的选择器正在寻找

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

选择器中的空格正在寻找i而不是i iteself的子节点。此外，ID必须是唯一的，因此您不能使用相同的id多个时间，因此请将其设为类名。

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

并更改选择器

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

jquery：＆＃34; on＆＃34;点击事件不在表中工作

4 个答案: