Question

问题陈述：我有一张桌子上有＆＃39; thead＆＃39;静态创建，并且＆＃39; tr / td＆＃39;在＆＃39; tbody＆＃39;里面动态创建。我必须要实现的是，当用户点击表格的任何地方时，我需要获得被点击的行的第一列的val（）。

为了测试这个，我使用＆＃39;来绑定点击事件。到父元素类，即，＆＃39; tbody＆＃39;的类。而且，我正在尝试更新第一栏中的文字＆＃39; td：first＆＃39;点击的行，例如，点击＆＃39;。

然而，某些事件并未被捕获。以下是JSfiddle的摘录。

HTML：

<table class="table" id="table-id">
    <thead>
        <tr class="table-header">
            <th class="edit">Edit</th>
            <th class="name">Name</th>
            <th class="status">Status</th>
        </tr>
    </thead>
    <tbody class="table-body" id="table-body-id">
    </tbody>
</table>

表创建

var container = $('.table-body');
['A', 'B'].forEach(function(index){
    $('<tr>', {class: 'table-row', id: 'table-row-id-'+index}).appendTo(container);
    $('<td />', {class: 'edit', id: 'edit-id-'+index, value: index}).appendTo(container);
    $('<td />', {class: 'name', id: 'name-id-'+index, text: 'Mr. '+index}).appendTo(container);
    $('<td />', {class: 'status', id: 'status-'+index, text: 'MSc'}).appendTo(container);
    $('</tr>').appendTo(container);
});

绑定点击事件

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

我已经查看了堆栈溢出上的大量线程，之后我编写了上面的代码。一个working JS-Fiddle example。

但是，它不适用于我上面编写的代码。能以某种方式请指出我为什么不工作以及如何解决它？

Answer 1

你的追加都搞砸了。这是您的代码更正/正常工作。

{{1}}

A demo

Answer 2

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

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

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

2 个答案: