使用Javascript + JQuery訪問自動生成的表中的行

Question

我是JQuery的新手。我有兩個表格：table1在HTML中被硬編碼，table2是從一個從csv文件加載的數組中使用javascript生成的。在顯示第二個表之後，我想要突出顯示（以及稍後處理）用戶使用JQuery單擊的行。下面簡化的代碼。

硬編碼表：

<table id="table1"> 
    <tr> <td>cell1</td><td>cell2</td><td>cell3</td> </tr> 
    <tr> <td>cell4</td><td>cell5</td><td>cell6</td> </tr> 
</table> 

來自ID爲 「數據」 的陣列生成表（正常工作）：

<script type="text/javascript"> 
function createTable(){ 
    var content = ""; 
    data.forEach (function(row){ 
     content += "<tr>"; 
     row.forEach (function(cell) 
      { content += "<td>" + cell + "</td>"; }); 
     content += "</tr>"; }); 
    document.getElementById("table2").innerHTML = content; } 
</script> 

jQuery腳本做任何在表中的行，例如單擊行時顯示警報：

<script> 
$("tr").click(function() 
{ 
    alert("do something"); 
}); 
</script> 

此代碼對於生成的表2不起作用。它只有當我嘗試突出顯示整個表格（使用$("table")）時才起作用，但是當我嘗試突出顯示它的任何元素時（tr，td），它不起作用。它適用於硬編碼表格1。

我嘗試過使用不同的元素，如$("#table2 :td")，$("#table2 td")等，但無濟於事。我怎樣才能訪問整個桌子，但不是它的元素？

Answer 1

對於動態創建的元素，你需要使用：

$('body').on("click", "#your_element",function(){ 

}); 

OR

$("#your_element").on("click",function(){ 

}); 

Answer 2

您需要動態生成元素的事件委託。嘗試如下。

$('body')on('click', 'tr', function() { 
    alert("do something"); 
}); 

Answer 3

之所以你的點擊不工作是因爲，

$("tr").click(function(){...}) 

這活動在所有現有的元素上註冊但您的動態行尚未呈現。爲此，您應該使用delegates。

你可以這樣做：

$(document).on("click", "tr", function(){...}) 

但既然你已經有了ID，你應該嘗試：

$("#table2").on("click", "tr", function(){...}); 

Answer 4

使用Live動態添加內容。

$('#table2 tr').on('click', function(){ 
    alert("do something"); 
    console.log(this) 
});