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我有它在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

尝试改变这一行：

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

因为你的选择是错误的。 i标记中没有编号为#delete的元素。 你应该使用类.delete而不是ID，因为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

你的选择是选择找

<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"); 
});