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