在Javascript/jQuery中動態添加表格行的綁定點擊事件

Question

問題陳述： 我有一個靜態創建的'thead'表，以及動態創建的'tbody'內的'tr/td'表。我必須實現的是，當用戶點擊桌子上的任何位置時，我需要獲取被點擊的行的第一列的val（）。

爲了測試這個，我使用'on'綁定了一個單擊事件給父元素類，即'tbody'的類。而且，我正在嘗試更新點擊行的第一列「td：first」中的文本，例如「點擊」。

但是，不知何故事件並未被捕獲。這裏是來自JSfiddle的摘錄。

HTML：

<table class="table" id="table-id"> 
    <thead> 
     <tr class="table-header"> 
      <th class="edit">Edit</th> 
      <th class="name">Name</th> 
      <th class="status">Status</th> 
     </tr> 
    </thead> 
    <tbody class="table-body" id="table-body-id"> 
    </tbody> 
</table> 

表創建

var container = $('.table-body'); 
['A', 'B'].forEach(function(index){ 
    $('<tr>', {class: 'table-row', id: 'table-row-id-'+index}).appendTo(container); 
    $('<td />', {class: 'edit', id: 'edit-id-'+index, value: index}).appendTo(container); 
    $('<td />', {class: 'name', id: 'name-id-'+index, text: 'Mr. '+index}).appendTo(container); 
    $('<td />', {class: 'status', id: 'status-'+index, text: 'MSc'}).appendTo(container); 
    $('</tr>').appendTo(container); 
}); 

約束力的Click事件

$("#table-body-id").on("click", "tr", function(){ 
    alert($(this).find('td:first').val()); 
    $(this).find('td:first').text('clicked'); 
}); 

我已經看了看堆棧溢出的線程過多之後，我寫上面碼。一個working JS-Fiddle example。

但是，它不適用於我上面編寫的代碼。請不知何故，請指出我爲什麼不工作，以及如何解決它？

Answer 1

通過身體附加點擊事件並不理想，但在某些情況下，我這樣做並且效果很好。

$("body").on("click", "#table-body-id tr", function(){ 
    alert($(this)); 
}); 

Answer 2

你的追加都搞砸了。這是你的代碼糾正/工作。

var container = $('.table-body'); 
//Create an empty container 
var $trs = $(); 
['A', 'B'].forEach(function(index) { 
    //Create TR and append TDs to it 
    var $tr = $('<tr/>', {class: 'table-row', id: 'table-row-id-'+index}); 
    $tr.append(
     $('<td />', {class: 'edit', id: 'edit-id-'+index, value: index}). 
     add($('<td />', {class: 'name', id: 'name-id-'+index, text: 'Mr. '+index})). 
     add($('<td />', {class: 'status', id: 'status-'+index, text: 'MSc'})) 
    ); 
    //Add each tr to the container 
    $trs = $trs.add($tr); 
}); 

//Append all TRs to the container. 
container.append($trs); 

$(".table-body").on('click', 'tr', function() { 
    alert('Clicked row '+ ($(this).index()+1)); 
    //Use .text() as td doesn't have method .val() 
    //Empty first time as the td:first has no text until clicked. 
    alert($(this).find('td:first').text()); 
    $(this).find('td:first').text('clicked'); 
}); 

A demo