在Javascript/jQuery中为动态添加的表行绑定单击事件

问题陈述： 我有一个静态创建了“thead”的表，动态创建了“tbody”中的“tr/td”。我必须实现的是，当用户单击表上的任何位置时，我需要获取被单击行的第一列的val（）

为了测试这一点，我使用“on”将一个click事件绑定到父元素类，即“tbody”的类。并且，我正在尝试更新单击行的第一列“td:First”中的文本，例如“clicked”

然而，不知何故，这些事件并没有被发现。这是从中提取的

HTML:

我已经研究了堆栈溢出上过多的线程，然后编写了上述代码。一个

---

但是，它不适用于我上面编写的代码。不知何故，请告诉我为什么不起作用以及如何修复它？

通过身体附加点击事件并不理想，但在某些情况下我这样做，效果很好

$("body").on("click", "#table-body-id tr", function(){
    alert($(this));
});

---

你的附件都弄乱了。这是您的代码已更正/正在使用

var container = $('.table-body');
//Create an empty container
var $trs = $();
['A', 'B'].forEach(function(index) {
    //Create TR and append TDs to it
    var $tr = $('<tr/>', {class: 'table-row', id: 'table-row-id-'+index});
    $tr.append(
        $('<td />', {class: 'edit', id: 'edit-id-'+index, value: index}).
        add($('<td />', {class: 'name', id: 'name-id-'+index, text: 'Mr. '+index})).
        add($('<td />', {class: 'status', id: 'status-'+index, text: 'MSc'}))
    );
    //Add each tr to the container
    $trs = $trs.add($tr);
});

//Append all TRs to the container.
container.append($trs);

$(".table-body").on('click', 'tr', function() {
    alert( 'Clicked row '+ ($(this).index()+1) );
    //Use .text() as td doesn't have method .val()
    //Empty first time as the td:first has no text until clicked.
    alert( $(this).find('td:first').text() );
    $(this).find('td:first').text('clicked');
});

var容器=$（'.table body'）；
//创建一个空容器
var$trs=$（）；
['A'，'B'].forEach（函数（索引）{
//创建TR并向其附加TDs
var$tr=$（''，{class:'表行'，id:'表行id-'+index}）；
$tr.append(
$（“”，{class:'edit'，id:'edit id-'+索引，值：index}）。
添加（$（''，{class:'name'，id:'name id-'+index，text:'Mr.+index}））。
添加（$（''，{class:'status'，id:'status-'+索引，文本：'MSc'}））
);
//将每个tr添加到容器中
$trs=$trs.add（$tr）；
});
//将所有TR附加到容器。
容器。附加（$trs）；
$（“.table body”）。在（'click'，'tr'，function（）上{
警报（“单击的行”+（$（this.index（）+1））；
//使用.text（），因为td没有方法.val（）
//首次为空，因为td:first在单击之前没有文本。
警报（$（this.find（'td:first'）.text（））；
$（this）.find（'td:first'）.text（'clicked'）；
});

---

谢谢您的回复。但是，不幸的是，这不起作用。谢谢你，在jQuery的最新版本中工作得非常好！令人惊叹的。成功了。：-）非常感谢。现在我知道我应该检查我的HTML。仅仅看到它按预期呈现可能是不对的。：-）我为什么不呢？太好了。：-）如果你说的是投票支持答案，不知何故，我需要“15个声誉”才能让我的投票公开。我对SO还相当陌生-（不确定这是否是C+P错误，但您的javascript访问

#表体id

，并且您的表的id为

表id

。

$("#table-body-id").on("click", "tr", function(){
    alert($(this).find('td:first').val());
    $(this).find('td:first').text('clicked');
});

$("body").on("click", "#table-body-id tr", function(){
    alert($(this));
});

var container = $('.table-body');
//Create an empty container
var $trs = $();
['A', 'B'].forEach(function(index) {
    //Create TR and append TDs to it
    var $tr = $('<tr/>', {class: 'table-row', id: 'table-row-id-'+index});
    $tr.append(
        $('<td />', {class: 'edit', id: 'edit-id-'+index, value: index}).
        add($('<td />', {class: 'name', id: 'name-id-'+index, text: 'Mr. '+index})).
        add($('<td />', {class: 'status', id: 'status-'+index, text: 'MSc'}))
    );
    //Add each tr to the container
    $trs = $trs.add($tr);
});

//Append all TRs to the container.
container.append($trs);

$(".table-body").on('click', 'tr', function() {
    alert( 'Clicked row '+ ($(this).index()+1) );
    //Use .text() as td doesn't have method .val()
    //Empty first time as the td:first has no text until clicked.
    alert( $(this).find('td:first').text() );
    $(this).find('td:first').text('clicked');
});