如何在html表中单击一行

时间:2014-12-04 11:17:59

标签: javascript jquery html-table

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

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")
    });
});

我做错了什么?

1 个答案:

答案 0 :(得分:6)

因为您是从Jquery动态生成HTML所以请尝试事件委派,如下所示: -

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

OR

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

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

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