Question

我已根据用户偏好在HTML文档中创建了一个网格(table)。

将rows和cells附加到表后，jQuery无法正常访问它们？它似乎不认为它们是DOM的一部分。

基本上我将处理数据的多维数组内的所有内容，例如：

[ ["","",""], ["","",""], ["","",""] ]

目前设置了附加的名为#row_0, #row_1, etc和td的行，但没有ID。

我需要能够将clicked TD映射到我的jQuery，以便我可以在其上执行一些函数和逻辑。

当用户点击td时，有什么办法可以回复我的JS：

tr = [1]

td = [2]

此处的当前代码：

http://jsfiddle.net/HNjMR/4/

Answer 1

这里是现场示例朋友：http://jsfiddle.net/HNjMR/5/

$("#board").on('click', 'td', function(){
    $("#board td").css("background","white");
    $(this).css("background","red");
});

这是因为当您在页面上插入新的动态元素时，就绪的jquery无法找到它。默认情况下，ready在加载时仅在现有元素上运行事件。虽然像.on这样的函数可以解决这个问题。

Answer 2

当添加td元素单击处理程序时，尚未创建那些目标元素，因此使用event delegation并将单击处理程序绑定到#board元素，目标元素选择器为{{ 1}}如下所示。然后使用.index()查找行和td的位置（将索引添加1，因为它基于0）

td

演示：Fiddle

你的创建代码也是错误的，jQuery追加不像字符串连接那样工作

$("#board").on('click', 'td', function () {
    var $td = $(this);
    var td = $td.index() + 1,
        row = $td.parent().index() + 1;
    alert(td + '-' + row);
});

演示：Fiddle

Answer 3

http://jsfiddle.net/898n2/1/

$( document ).on( "click", "td", function() {
  alert(this.id);
});

这是使用您当前的代码

注意我使用过.on - 这是一个使用jquery的“live”事件

我还修改了每个td的命名以读取col_1_2 - 其中1为col，2为row。

        $("#row_"+i).append("<td id='col_"+j+"_"+i+"'>&nbsp;</td>");

Answer 4

这里的解决方案，记住你应该在创建元素时绑定事件点击，你不应该使用一般的$（'td'）。click事件，这不起作用，因为一些元素没有添加到DOM中

$("#go").click(function(){
    var size = $("#size").val();
    if(size<3 || size>10){
        alert("That is not a valid input. Please select 3-10");
        return;
    }

    $('#board tr').remove();

    // Check this bellow
    var size = parseInt($("#size").val()), 
    tr = $("<tr/>"), td = $("<td/>"), tdc;

    for(var i=0;i < size;i++){    
        for(var j=0;j<size;j++){
            tdc = td.clone();
            tdc.attr('id', 'col_'+j);
            tr.append(tdc);

            tdc.click(function(){
                alert(this);
            });
        }

        tr.attr('id','row_'+i);

        $("#board").append(tr);
    }
});

jQuery - 识别被点击的td

4 个答案: