表格单元格内 span 或 td 的单击事件处理程序不起作用答案

【问题标题】：click event handler for span or td inside a table cell does not work表格单元格内 span 或 td 的单击事件处理程序不起作用
【发布时间】：2013-07-31 08:05:28
【问题描述】：

当我的页面加载时，我正在填充一个表格。我的行创建如下：

        $.each(datax, function() {
            $.each(this, function(kx , vx) {

                    tbl_row += '<td><p id="' +'^'+$key1+':'+$keyval1 +'^'+$key2+':'+$keyval2 +'^'+$key3+':'+$keyval3 +'^'+$key4+':'+$keyval4 +'^'+$key5+':'+$keyval5+ '$$'+kx+':'+vx+ '">'+vx+'</p></td>'; 
                    tbl_labels += "<th>"+kx+"</th>";
                })
                tbl_body += "<tr>"+tbl_row+"</tr>";   
                tbl_head  = "<tr>"+tbl_labels+"</tr>";                  
            })

            $("#table_results thead").html(tbl_head); 
            $("#table_results tbody").html(tbl_body); 
            $("#table_results").table("refresh");

到目前为止一切正常。问题是，我想处理表格单元格的点击事件。我试图将 span 和 p 放在单元格中，但以下处理程序不起作用

$("p").click(function (){
alert('handler for click p worked');
});

$("span").click(function (){
alert('handler for click span worked');
});

我做错了什么？

【问题讨论】：

何时分配点击处理程序？按照您的操作方式，它必须发生在标记插入页面之后。

标签： javascript jquery event-handling click

【解决方案1】：

试试这个代码：

$(document).on('click', 'p', function (){
    alert('handler for click p worked');
});

$(document).on('click', 'span', function (){
    alert('handler for click span worked');
});

它使用on method 检测动态创建的元素上的事件。

【讨论】：

【解决方案2】：

这里需要使用事件委托，因为元素是动态添加的

$("#table_results").on('click', 'span', function(){
    alert('handler for click span worked');
})

$("#table_results").on('click', 'p', function(){
    alert('handler for click p worked');
})

【讨论】：

【解决方案3】：

检查下面的代码（提醒单元格文本）：

$("#tbl tbody").find("p").on("click",function (){
     alert($(this).text());
});

工作示例：http://jsfiddle.net/kQpfE/

【讨论】：

【解决方案4】：

在 DOM 准备好后创建的元素上绑定事件。您需要从 DOM 就绪后未生成的父 DOM 元素绑定它们。

所以你应该这样做：

$("#table_results tbody").find('span').click(function (){
       alert('handler for click span worked');
});

【讨论】：