jQuery on（）與表格無法正常工作

Question

我想創建一個動態構建表的頁面。我知道何時動態添加您需要的元素給.on（）方法。我過去一直這樣做，但我似乎無法讓它工作。我有一個表，當頁面加載1行，並點擊工作，但當我運行函數來添加新行時沒有任何反應，當我點擊它。有人可以幫忙嗎？

這裏是功能

$("#dataTable tbody tr").on("click", "a", function() { 
    alert("test"); 
}); 

這是負載創建的表。

<table id="dataTable" width="80%" align="center"> 
    <thead> 
     <tr> 
      <th>Action</th> 
      <th>First Name</th> 
      <th>Last Name</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td id ="123"><a id="123" href="#">Delete</a></td> 
      <td>test</td> 
      <td>test2</td> 
     </tr> 
    </tbody> 
</table> 

這裏是Ajax調用添加到表

var addRow = "<tr id="+id+"><td><a href='#' id="+id+" class='rowDel'>Delete</a></td><td>"+fName+"</td><td>"+lName+"</td></tr>"; 
$("#dataTable").append(addRow); 

任何想法，爲什麼它不會是工作線？

在此先感謝。

Answer 1

它應該是：

$("#dataTable tbody").on("click", "tr a", function() { ... }); 

爲這是如何工作的說明，請參見jquery dynamic binding .on() select parents or children?。簡而言之，所有動態元素都必須在參數中，方法應該應用於靜態元素。

Answer 2

事件代表團的目標元素應該是一個靜態的元素：

$("#dataTable tbody").on("click", "tr a", function() { 
    alert("test"); 
});