Javascript 在表格单元格内单击span或td的事件处理程序无效

Javascript 在表格单元格内单击span或td的事件处理程序无效,javascript,jquery,event-handling,click,Javascript,Jquery,Event Handling,Click,加载页面时,我正在填充表格。我的行创建如下: $.each(datax, function() { $.each(this, function(kx , vx) { tbl_row += '<td><p id="' +'^'+$key1+':'+$keyval1 +'^'+$key2+':'+$keyval2 +'^'+$key3+':'+$keyval3 +'^'+$key4+':'+$keyv

加载页面时,我正在填充表格。我的行创建如下:

        $.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");   
我做错了什么?

请尝试以下代码:

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

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

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

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

所以你应该做一些类似的事情:

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

您需要在这里使用事件委派,因为元素是动态添加的

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

$("#table_results").on('click', 'p', function(){
    alert('handler for click p worked');
})
检查下面的代码(提醒单元格文本):


工作示例:

何时分配单击处理程序?按照您的操作方式,必须在将标记插入页面后进行。
$("#table_results").on('click', 'span', function(){
    alert('handler for click span worked');
})

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