如何使 html 表中的行可单击

How to make a row in a html table clickable

本文关键字：单击 何使 html      更新时间：2023-09-26

我有一个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")
    });
});

我做错了什么？

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

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

或

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

OR（在回答中添加Jai的有用评论）

$('#dataTableDiv').on('click','.row',function(){
    // Your Code...
});
相关文章：