jQuery的動態的onclick

Question

我想要的onclick動態添加到行這種方式，

function addStudent(data) { 
    var row = $('#students').append('<tr itemId="' + data.ID + '" ></tr>'); 
    row.on("click", function() { 
     console.log(data.ID); // THIS IS JUST FOR TESTING 
     //loadStudent(data); 
    }); 
} 

爲什麼在控制檯我得到當點擊只有一行的所有ID？

問題？

單擊任何一行我在控制檯中獲取所有數據或學生ID。

編輯

請注意data.ID在這裏例如你可以看到我註釋掉真正的代碼在那裏我完全傳遞到對象的另一種方法。

Answer 1

到Click事件附加到<tr>，你需要把它寫這樣的：

$('<tr itemId="' + data.ID + '" ></tr>').appendTo('#students').on("click", function() { 
     console.log(data.ID); 
     //loadStudent(data); 
    }); 

這將創建<tr>追加到#students，然後再連接上單擊事件到新創建<tr>

如果你想將數據傳遞到事件中，你可以做這樣的：

$('<tr itemId="' + data.ID + '" ></tr>').appendTo('#students').on("click", { value: data }, function() {    
     var theData = event.data.value; 
     console.log(theData.ID); 
     //loadStudent(theData); 
    }); 

欲瞭解更多關於此概念的信息，請參閱here。

Answer 2

爲什麼在控制檯中我只在一行上點擊時獲取所有ID？

因爲每次調用addStudent時，都會綁定函數內的其他點擊處理程序。

將功能外的點擊處理程序綁定到代表團。

$('#students').on('click', 'tr', function(){ 
    console.log(data.ID); 
     //loadStudent(data); 
    });