javascript - 单击动态生成的表中的一行时，选中其单选按钮

Question

在我的网页上，我有一个按钮，单击该按钮会动态生成一个表格。表的每一行都有一个单选按钮。现在，我试图在单击该行时检查该行的相应单选按钮。这是 HTML

Insert table here
<button name="myreq" id="myreq" class="homeButtons">My Requests</button>
<table class="newreqtable" id="myrequesttable"></table>

这是我想要实现的目标的 JS。我已手动在“jsarray”中添加了值，以便于使用 fiddle 。 http://jsfiddle.net/4MYGa/1/

$("#myreq")
.button()
.click(function () {

var jsarray = new Array();
jsarray.push("1");
jsarray.push("requestor1");
jsarray.push("approver1");
jsarray.push("pending");
jsarray.push("chrome");
jsarray.push("25");
jsarray.push("source1");
jsarray.push("dest1");
jsarray.push("2");
jsarray.push("requestor2");
jsarray.push("approver2");
jsarray.push("pending");
jsarray.push("firefox");
jsarray.push("25");
jsarray.push("source2");
jsarray.push("dest2");

var table = '<table>';
table += '<tr><th>Select</th><th>RequestID</th><th >Requester</th><th>Approver</th><th>Status</th><th>Product</th><th>Version</th><th>Source</th><th>Destination</th></tr>';

for (var j = 0; j < jsarray.length; j += 8) {
    table += '<tr><td><input type="radio" name="requestradio" id="rad' + j + '"></td><td>' + jsarray[j] + '</td><td>' + jsarray[j + 1] + '</td><td>' + jsarray[j + 2] + '</td><td>' + jsarray[j + 3] + '</td><td>' + jsarray[j + 4] + '</td><td>' + jsarray[j + 5] + '</td><td>' + jsarray[j + 6] + '</td><td>' + jsarray[j + 7] + '</td></tr>';
}
table += '</table>';
$("#myrequesttable").html(table);
});

$('#myrequesttable tr').click(function () {

$('#myrequesttable tr').removeClass("active");
$(this).addClass("active");
$(this).find('[name="requestradio"]').prop('checked', true);
});

任何关于我可能做错了什么的想法都会非常有帮助。谢谢

Answer 1

您需要在 dom 准备就绪时初始化该事件。

 $("#myrequesttable").html(table);
//bind event when dom is ready
$('#myrequesttable tr').click(function () {
$('#myrequesttable tr').removeClass("active");
$(this).addClass("active");
$(this).find('[name="requestradio"]').prop('checked', true);

<强> Working Fiddle