Javascript 检索表格单元格'；在jQuery中单击一次的文本

我在检索被单击的表单元格的文本时遇到了一些问题，唯一可以触发事件的方法是用替换“tbody td”

但这不会为单击的单元格返回正确的数据值。有人知道我可能做错了什么吗？我需要使用jQuery创建表，以便根据表单中的输入动态调整表的大小

$(document).ready(function() {
    $('#selection').submit(function() {
        $(function () {

            var $tbl = $('<table border="1">').attr('id', 'table');
            var $tbody = $('<tbody>').attr('id', 'tableBody');

            for (var i = 0; i < $("#numOfPieces").val(); i++) {
                var trow = $("<tr>"); // New row

                for (var j = 0; j < $("#numOfPieces").val(); j++) {
                    $("<td>")
                            .text('Row : ' + i + ', Col: ' + j)
                            .appendTo(trow); // New data cell
                }
                trow.appendTo($tbody);
            }

            $tbl.append($tbody);
            $('table').remove(); // Remove previously created table
            $('body').append($tbl);
        });
        return false;
    });

    $("tbody td").click(function(e) {
        var currentCellText = $(this).text();
        var LeftCellText = $(this).prev().text();
        alert(currentCellText);
    });
});

$（文档）.ready（函数（）{
$（“#选择”）.submit（函数（）{
$（函数（）{
var$tbl=$（''）.attr（'id'，'table'）；
var$tbody=$（''）.attr（'id'，'tableBody'）；
对于（var i=0；i<$（“#numofices”）.val（）；i++）{
var trow=$（“”）；//新行
对于（var j=0；j<$（“#numofices”）.val（）；j++）{
$("")
.text（'行：'+i+'，列：'+j）
.appendTo（trow）；//新数据单元
}
trow.附录（$t正文）；
}
$tbl.附加（$tbody）；
$（'table'）.remove（）；//删除以前创建的表
$（'body'）。追加（$tbl）；
});
返回false；
});
$（“tbody td”）。单击（函数（e）{
var currentCellText=$（this.text（）；
var LeftCellText=$（this.prev（）.text（）；
警报（currentCellText）；
});
});

问题是您的单击处理程序绑定到现有表。您需要将其绑定到“任意”表。在文档准备功能中：

$('.container').on('click', 'td', function(e) {
  var currentCellText = $(this).text();
  // etc
});

其中，

.container

是任何预期不会被破坏的容器包装器元素。让它成为你能做的最接近的祖先。如果没有候选人，那么你可以使用

body

，但如果可以的话，我会避免这么高的职位

当然，如果需要，可以将

td

选择器修改为更具体。如果您有一种这种行为应该出现在其中的表类型，那么请忽略id，并为该类型的表提供一个类。然后，

td

就变成了

.someClass td

---

在尝试使用LefCellText之前，您可能还想对它进行消毒。以现有的方式声明变量是可以的（如果没有这样的选择器，它只会变得未定义），但是您不想假设您将拥有内容，您需要创建一个后备计划。

问题是您的单击处理程序绑定到现有表。您需要将其绑定到“任意”表。在文档准备功能中：

$('.container').on('click', 'td', function(e) {
  var currentCellText = $(this).text();
  // etc
});

其中，

.container

是任何预期不会被破坏的容器包装器元素。让它成为你能做的最接近的祖先。如果没有候选人，那么你可以使用

body

，但如果可以的话，我会避免这么高的职位

当然，如果需要，可以将

td

选择器修改为更具体。如果您有一种这种行为应该出现在其中的表类型，那么请忽略id，并为该类型的表提供一个类。然后，

td

就变成了

.someClass td

---

在尝试使用LefCellText之前，您可能还想对它进行消毒。以现有的方式声明变量是可以的（如果没有这样的选择器，它只会变得未定义），但是您不想假设您将拥有内容，您需要创建一个后备计划。

它做错了什么？例如，如果将每个单元格的编号作为值，如果单击第3行第4列（可能会有34个值）是值53（第5行第3列）？事件处理程序从未被调用，正如steveax在下面的评论中指出的，侦听器所附加的元素需要已经存在于页面上，因此使用

$（'body'）。on（‘click’、‘tbody td’…

@bobbyme01-我很好奇是否发生了这种情况，这就是为什么我没有给出答案，我希望他的观察是正确的。这有什么错呢？例如，如果你把每个单元格的数量作为值，如果你点击第3行第4列（可能会有34个值）就是53（第5行，第3列）？正如steveax在侦听器附加到的元素下面的注释中指出的，事件处理程序从未被调用过，因此需要在页面上使用

$（'body'）。on（'click'，'tbody td'…

@bobbyme01-我很好奇是否发生了这样的事情，这就是为什么我没有给出答案，我希望他的观察是正确的。+1用于委托，但我相信当处理程序绑定时，选择器必须存在(“事件处理程序仅绑定到当前选定的元素；它们必须在您的代码调用.on（）”）时存在于页面上，因此您需要：

$（'body'）。在（'click'，'tbody td'，function（e）{…

上，您的家伙太棒了！我必须使用

$（'body'）。在（'click'、'tbody td'…

如steveax建议的那样正确处理事件。感谢你们的帮助！我将其修改为

$（'body'）。关于（'click'、'table#table tbody td'，函数（e）{…<代码>将其缩小到特定的表，尽管您可能想考虑一个更好的<代码> ID <代码>值。同意<代码> ID <代码>值，也可以更快地将选择器向下压缩到“代码> >表TD ，因此：<代码> $（‘体’）。{…

好主意，可以将更多的表添加到页面中，以便为特定的表使用更唯一的id，感谢+1的委托，但我相信当绑定处理程序时，选择器必须存在（“事件处理程序仅绑定到当前选定的元素；它们必须在您的代码调用.on（））时存在于页面上，因此您需要：

$（'body'）。在（'click'，'tbody td'，function（e）{…

上，您的伙计们太棒了！我必须使用

$（'body'）。在（'click'、'tbody td'…

如steveax建议正确处理事件。谢谢你们两位