无法点击使用 jquery 创建的表答案

【问题标题】：Can't click on the table created with jquery无法点击使用 jquery 创建的表
【发布时间】：2017-07-13 16:14:11
【问题描述】：

我正在使用 jQuery 创建一个包含图像的表格。我的 js 代码如下所示：

$(document).ready(function() {
    var korpusArray = new Array();
    $.getJSON("file.js", function(data) {
        var korpusId;
        var korpusChooseTable = "<table id='TableKorpusGaleria'><tbody><tr>";
        $.each(data, function(i, value) {
            korpusArray.push(value.text);
            strRemove = value.filename.replace("korpus/", "");
            korpusChooseTable += '<td><p>'+value.title+'</p><p style="display:none;">'+value.id+'</p></br><img src="/korpus/thumbs/phoca_thumb_s_'+strRemove+'"></td>';
        });
        korpusChooseTable += '</tr></tbody></table>'; 
        $("#korpusChoose").html(korpusChooseTable);
        console.log(korpusArray.length);
        console.log(data.length);
    });
    // after this I wanna click on table cell and do some function but
    // it doesnt work. Can somebody tell me what I'm doing wrong?
    $("#korpusChoose #TableKorpusGaleria tbody td").click(function() {
        alert();
    });
});

【问题讨论】：

生成的表格的html是什么样子的？
顺便说一句，有些浏览器不喜欢alert()，坚持alert(1)或更好的console.log（前提是您的浏览器支持）。
是的，我试过了，用 $("#korpusChoose table tbody td").click(function(){ alert(); });
警报('helo');也不起作用/铬
格式很好，应该没有问题

标签： jquery json html-table click mouseevent

【解决方案1】：

对动态创建的项目使用委托 - 如果元素在绑定时不存在...通常在 dom 准备就绪 - 那么将不会附加任何事件处理程序

jQuery 1.7 及更高版本http://api.jquery.com/on/

$("#korpusChoose ").on('click','#TableKorpusGaleria tbody td',function(){
       alert();       
});

或 jQuery 1.6 到 jQuery 1.4.3 http://api.jquery.com/delegate/

$("#korpusChoose ").delegate('#TableKorpusGaleria tbody td','click',function(){
       alert();       
});

根据继承者重写 .live() 方法很简单；这些是所有三种事件附件方法的等效调用的模板：

$(选择器).live(事件、数据、处理程序); // jQuery 1.3+

$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+

$(document).on(事件、选择器、数据、处理程序); // jQuery 1.7+

另一种方法是在将其添加到 dom 后立即添加

$("#korpusChoose").html(korpusChooseTable);

紧接着

$("#korpusChoose #TableKorpusGaleria tbody td").click(function(){
     alert();
});

虽然后者效率较低，因为您会将事件处理程序绑定到表中的每个 td 元素 - 使用委托，您只需将其绑定到 dom 中存在的父元素并在事件冒泡时处理该事件

【讨论】：

您的 1.6 及以下代码错误。 on 不存在。认为你的意思是delegate。
@JamesMontagne 是的，你是对的......这就是我的意思 - 哎呀
$("#korpusChoose ").on('click','#TableKorpusGaleria tbody td',function(){ alert(); }); // 有用！！ ...
谢谢大家的回答！ :)

【解决方案2】：

因为表是动态创建的，所以需要使用event delegation，使用jquery的on。这将允许您在元素存在之前附加处理程序。

$("#korpusChoose #TableKorpusGaleria tbody td").click(function(e){

应该是

$("container").on("focus", "#korpusChoose #TableKorpusGaleria tbody td",function(e){

其中container 是一些非动态加载的静态祖先元素的选择器。如果不存在这样的容器，则可以使用document，但应尽可能避免使用。

【讨论】：

在与问题不直接相关的相关注释上；您可以排除选择器的#korpusChoose 位，因为第二个id 就足够了。

【解决方案3】：

因为表格是动态生成的，你可以使用：

$('#mytable').live('click', function() {
    // Click event handler action here...
});

使用 live() 方法绑定事件处理程序，它们也将在由 AJAX 调用或类似调用动态创建的元素上触发。

更新：由于 .live() 自 JQuery 1.7 起已弃用，感谢 Andrew，请考虑使用 .on() 进行事件委托。

【讨论】：

live 自 jQuery 1.7 起已弃用，取而代之的是 on

【解决方案4】：

使用 jquery $("table").live("click",function(){ }); 为现在和将来匹配当前选择器的所有元素附加一个事件处理程序。 Jquery click 仅绑定文档中当前元素的单击事件。

http://jsfiddle.net/wFcpP/3/

【讨论】：

从 1.7 开始，live 已弃用，取而代之的是 on。即使在 1.7 之前的版本中，也应尽可能使用 delegate 代替 live。