1

我正在使用 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();
    });
});
4

4 回答 4

2

对动态创建的项目使用委托 - 如果在绑定时元素不存在......通常在 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 中存在的父元素并在事件冒泡时处理事件

于 2012-09-19T13:46:59.547 回答
1

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

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

相反会是

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

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

于 2012-09-19T13:47:03.600 回答
0

因为该表是动态生成的，您可以使用：

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

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

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

于 2012-09-19T13:48:23.140 回答
0

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

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

于 2012-09-19T13:48:54.223 回答