使 jquery 表可点击答案

【问题标题】：Make jquery table clickable使 jquery 表可点击
【发布时间】：2016-08-01 06:51:19
【问题描述】：

我创建了一个 jquery 表，其中包含来自 mysql 表的数据，我需要使其可点击，因为我想在点击时显示一个模式。问题是点击通风口在 jquery 表中不起作用。这是我的 jquery 表：

$('#btnLoadAttendance').click(function(){
var dept = $('#cmbdept').val();
if(dept == "SEWING")
{
    var dLine = $('#cmbline').val();
    var dSection = $('#cmbsection').val();
    console.log(dept+', '+dLine+', '+dSection);
    var formdata = {dept:dept,section:dSection,line:dLine};
}
else
{
    var dLine = '';
    var dSection = '';
    console.log(dept);
    var formdata = {dept:dept};
}

$.ajax({
    type: 'POST',
    url: "<?php echo site_url('tms/loadAttendance');?>",
    data:formdata,
    dataType: 'json',
    success: function(data){
        console.log(data.emplist[0]);
        var tr;
        $('#tblAttendance tbody').empty();
        $.each(data.emplist,function(i,item){
            if(item.Active == '1')
            {
                var status = 'Active';
            }
            else
            {
                var status = 'Resigned';
            }

            tr = $('<tr/>');
            tr.append("<td><a href='#'>Edit</a></td>");
            tr.append("<td>"+item.EmpID+"</td>");
            tr.append("<td>"+item.Lastname+', '+item.Firstname+', '+item.Middlename+"</td>");
            tr.append("<td>"+status+"</td>");
            $('#tblAttendance').append(tr);
        });
    },
});
});

这是我正在使用的点击事件：

$(function(){
$('#tblAttendance tbody td').click(function(){
    console.log('You clicked');
});
});

我已经用谷歌搜索了解决方案，但他们给了我不匹配的答案..

【问题讨论】：

也许你应该为tr而不是td添加选择器？
我试过了，但没有任何改变。我也试过只放 tr td 但结果相同。
tbody td 将选择tbody 中的所有tds。您的tds 在tr，而不是tbody。至少他们应该是。
你能给出你生成的代码吗？在浏览器中运行代码，检查它并将您生成的 HTML 表格粘贴给我们...

标签： jquery mysql codeigniter

【解决方案1】：

试试这个：

$('#tblAttendance tbody').on('click', 'td', function () {
     console.log('You clicked');
});

【讨论】：

请将其标记为正确答案。很高兴帮助你..:)

【解决方案2】：

您正在为非动态创建的元素使用选择器。您应该使用选择器进行动态创建，如下所示：

$('#tblAttendance').on('click', 'tbody ...', function(){
    //your code here..
});

或者只是：

$(document).on('click', 'tbody ...', function(){
    //your code here..
});

技巧是选择一些非动态父元素，并在.on() 函数中插入一个需要点击处理程序的元素。

【讨论】：