首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >无法单击使用jquery创建的表

无法单击使用jquery创建的表
EN

Stack Overflow用户
提问于 2012-09-19 21:42:51
回答 4查看 1.2K关注 0票数 1

我正在使用jQuery创建一个包含图像的表。我的js代码看起来像这样:

代码语言:javascript
复制
$(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();
    });
});
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-09-19 21:47:00

对动态创建的项目使用委托-如果绑定时元素不存在...,则不会附加任何事件处理程序。

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

代码语言:javascript
复制
$("#korpusChoose ").on('click','#TableKorpusGaleria tbody td',function(){
       alert();       
});

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

代码语言:javascript
复制
$("#korpusChoose ").delegate('#TableKorpusGaleria tbody td','click',function(){
       alert();       
});

根据后继方法,

重写.live()方法非常简单;以下是所有三个事件附加方法的等效调用的模板:

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

$(文档).delegate(选择器,事件,数据,处理器);// jQuery 1.4.3+

$(Document).on(事件,选择器,数据,处理器);// jQuery 1.7+

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

代码语言:javascript
复制
$("#korpusChoose").html(korpusChooseTable);

然后紧接着

代码语言:javascript
复制
$("#korpusChoose #TableKorpusGaleria tbody td").click(function(){
     alert();
});

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

票数 2
EN

Stack Overflow用户

发布于 2012-09-19 21:47:04

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

代码语言:javascript
复制
$("#korpusChoose #TableKorpusGaleria tbody td").click(function(e){

将会是

代码语言:javascript
复制
$("container").on("focus", "#korpusChoose #TableKorpusGaleria tbody td",function(e){

其中container是某个静态祖先元素的选择器,该元素不是动态加载的。如果不存在这样的容器,则可以使用document,但在可能的情况下应避免这样做。

票数 1
EN

Stack Overflow用户

发布于 2012-09-19 21:48:23

因为该表是动态生成的,所以您可以使用:

代码语言:javascript
复制
$('#mytable').live('click', function() {
    // Click event handler action here...
});

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

更新:由于.live()从JQuery 1.7开始就被弃用了,感谢安德鲁,请考虑使用.on()进行事件委派。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12496022

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档