Question

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

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

这是我正在努力实现的JS。为了方便起见，我手动在'jsarray'中添加了值。 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

Answer 2

试试这个

$('body').on('click','#myrequesttable tr',function (){

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

DEMO

Answer 3

更改您的点击事件：

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

到此：

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

Demo Fiddle

查看您的所有<tr/>s是动态生成的，因此在加载页面时它们不存在，此问题的解决方案是将事件委派给页面dom中最近的静态父级，即{{ 1}}表。所以你必须委托给他。

虽然您可以委托#myrequesttable本身，但如果涉及到性能，那么应该避免。

Answer 4

将代码修改为以下内容：

// Cache $("#myrequesttable")
var $myrequesttable = $("#myrequesttable");
$myrequesttable
    .on("click", "tr", function () {
        // Cache $(this)
        var $this = $(this);
        $myrequesttable.find("tr").removeClass("active");
        $this.addClass("active");
        $this.find('input:radio[name="requestradio"]').prop('checked', true);
    });

单击动态生成的表中的行，选中其单选按钮

4 个答案: