.on单击事件并不总是在动态添加的表行上起作用

Question

我有一个表，其中包含动态添加的表行和一个jQuery代码，用于在具有特定类的行上添加.on click事件。 关键是该代码运行良好，但仅在某些情况下...当我将鼠标悬停在表行上时，80％的调试会话会开始闪烁，并且在单击该行20次后该事件将起作用。

表：

<div id="main-tbl">
    <table id="tbl" class="table">
    </table>
</div>

jQuery的

$("#tbl").on("click", "tr", function () {
    alert("test");
});

通过ajax添加行

$.ajax({
    url: 'index.aspx/GetData',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    type: "POST",
    success: function (data) {
        debugger;
        if (data.d.length > 0) {
            var newdata = data.d;
            $tbl.empty();
            $tbl.append('<tr><th>Test</th></tr>');
            var rows = [];
            for (var i = 0; i < newdata.length; i++) {
                rows.push('<tr><td>newdata[i].Test</td></tr>');
            }
            $tbl.append(rows.join(''));
        }
    }
});

基础是使用signalr + ajax从sqldb加载数据的asp.net。

有谁知道为什么它有时只能工作？

-亚历山大

Answer 1

根据六宝回答：

 $("#tbl").on("click", "tr", function() { $("#tbl").append('<tr><td>Test</td></tr>'); console.log($(this).index()); //alert("test"); }); 

 <div id="main-tbl"> <table id="tbl" class="table"> <tr> <td>New!</td> </tr> </table> </div> 

Answer 2

当您处理动态创建的行时，代码应如下所示。

$(document).on("click", "tr", function () {
  alert("test");
});