jQuery - 识别被点击的 td答案

【问题标题】：jQuery - Identify td that was clickedjQuery - 识别被点击的 td
【发布时间】：2014-01-04 17:28:53
【问题描述】：

我根据用户偏好在 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/

【问题讨论】：

不相关的（可能）注释...为什么它会在我的表格中显示一个闪烁的光标...？

标签： javascript jquery arrays dom click

【解决方案1】：

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

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

这是因为当你在页面上插入一个新的动态元素时，现成的 jquery 找不到它。默认情况下，ready 仅在加载时对现有元素运行事件。而像.on这样的一些函数，可以解决这个问题。

【讨论】：

【解决方案2】：

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

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

这是使用您当前的代码

注意我使用了 .on - 这是一个使用 jquery 的“实时”事件

我还将您对每个 td 的命名修改为 col_1_2 - 其中 1 是 col，2 是 row。

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

【讨论】：

就逻辑而言，我有 Javascript，但学习操作 DOM 仍然有点不稳定。感谢您的帮助 :-) 看到改进的做事方式和方法非常有帮助。
很高兴我能提供帮助 - 如果您喜欢我的答案，您可以随时投票（如果它符合您的目的，请接受它！）

【解决方案3】：

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

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

演示：Fiddle

你的创建代码也有问题，jQuery append 不像字符串连接那样工作

$('#board tr').remove();
var size = parseInt($("#size").val());
for (var i = 0; i < size; i++) {
    var $tr = $('<tr />', {
        id: 'row_' + i
    }).data('index', i + 1);
    $("#board").append("<tr id='row_" + i + "'>");
    for (var j = 0; j < size; j++) {
        $('<td />', {
            id: 'col_' + j
        }).data('index', j + 1).appendTo($tr);
    }
    $("#board").append($tr);
}

演示：Fiddle

【讨论】：

【解决方案4】：

这里的解决方案，记住你应该在创建元素时绑定 eventclick，你不应该使用通用的 $('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);
    }
});

【讨论】：

是的！恭喜老哥！