javascript - 如何使html表格中的一行可点击

Question

我有这个在 html 中创建表格的 Javascript 函数。这正是我想要的。

var thead = '<table><thead><tr><td>#</td><td>Name</td><td>Id</td></tr></thead><tbody>\n';
for(var i=0; i<dataArray.length; i++)
{
    tbody += '<tr class="row">';
    tbody += '<td>' + (i+1) + '</td>';
    tbody += '<td>' + dataArray[i].Device_Name + '</td>';
    tbody += '<td>' + dataArray[i].Device_Id + '</td>';         
    tbody += '</tr>\n';     
}
var tfooter = '</tbody></table>';
document.getElementById('dataTableDiv').innerHTML = thead + tbody + tfooter;

现在我想在每次单击特定行时运行一些代码。现在只要代码正在执行，点击哪一行都没有关系。这是应该处理行点击的代码。所有其他点击操作在 $(document).ready(function(){}); 中完美运行，但由于某种原因，该表的点击处理程序不起作用。

$(document).ready(function()
{
    $(".row").click(function() 
    {
        console.log("Blablabla")
    });
});

我做错了什么？

Answer 1

因为您是从 Jquery 动态生成 HTML，所以请尝试事件委托(delegate)，如下所示:-

$(document).on('click','.row',function(){
    // Your Code...
});

或

$(document.body).on('click','.row',function(){
    // Your Code...
});

或者(在回答中添加Jai 的 有用的评论)

$('#dataTableDiv').on('click','.row',function(){
    // Your Code...
});