在Javascript / jQuery中为动态添加的表行绑定Click事件 [英] Binding Click events for Dynamically added Table Rows in Javascript/jQuery
问题描述
问题陈述:
我有一个静态创建'thead'的表,动态创建的'tbody'里面有'tr / td'。我必须实现的是当用户点击表格的任何地方时,我需要获得被点击的行的第一列的val()。
Problem Statement: I have a table with 'thead' created statically, and 'tr/td' inside the 'tbody' created dynamically. What I have to achieve is that when the user clicks anywhere on the table, I need to get the val() of the first column of the row which was clicked.
为了测试这个,我使用'on'将单击事件绑定到父元素类,即'tbody'的类。并且,我正在尝试更新单击行的第一列'td:first'中的文本,例如'clicked'。
To test this I am binding a click event using 'on' to the parent element class,i.e., class for 'tbody'. And, I am trying to update the text in the First column 'td:first' of the clicked row, e.g., 'clicked'.
然而,不知何故事件是没被抓住以下是 JSfiddle 的摘录。
However, somehow the events are not being caught. Here is the extract from the 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>
TABLE CREATION
TABLE CREATION
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);
});
BINDING CLICK EVENT
BINDING CLICK EVENT
$("#table-body-id").on("click", "tr", function(){
alert($(this).find('td:first').val());
$(this).find('td:first').text('clicked');
});
我已经查看了堆栈溢出的大量线程,之后我编写了上面的代码。一个工作JS-Fiddle示例。
I have looked at plethora of threads on stack-overflow and after that I wrote the above code. One working JS-Fiddle example.
但是,它不适用于我上面编写的代码。可能以某种方式请指出我为什么不工作以及如何解决它?
However, it is not working for the code that I have written above. Could somehow please point me out as to why is not working and how to fix it?
推荐答案
你的追加都搞砸了。这是你的代码更正/工作。
Your appends were all messed up. Here is your code corrected/working.
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');
});
这篇关于在Javascript / jQuery中为动态添加的表行绑定Click事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!