不能点击使用jQuery创建的表(Can't click on the table crea

我创建与使用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();
    });
});

Answer 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+
（文档）$ .delegate（选择，事件，数据，处理程序）; // jQuery的1.4.3+
$（文件）。在（活动，选择，数据处理程序）; // jQuery的1.7+

另一种方式是添加的权利，你把它添加到DOM后

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

然后之后

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

虽然后者是低效率的，因为你会被绑定的事件处理程序表中的每个TD元素 - 使用代表团只将其绑定到其存在DOM中的父元素，当它冒泡处理事件

Answer 2:

由于该表是动态创建的，您将需要使用事件委托，使用jQuery的on 。这将允许你的元素存在之前附加的处理程序。

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

将改为

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

其中container是用于没有动态加载的一些静态祖先元素的选择器。如果没有这样的容器存在， document可以使用，尽管这是要尽可能地避免。

Answer 3:

由于该表是动态生成的，你可以使用：

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

使用实时（）方法来绑定事件处理程序，他们也将在动态创建的AJAX调用或相似的元素触发。

更新：由于.live（）被废弃了，因为JQuery的1.7，感谢Andrew，可以考虑使用。对（）事件代表团。

Answer 4:

使用jQuery $("table").live("click",function(){ }); 附加的事件处理程序的当前选择现在和将来匹配这，所有的元素。 jQuery的点击只绑定文档中存在的元素click事件。

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

文章来源: Can't click on the table created with jquery