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(''));
        }
    }
});

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

有没有人有任何想法为什么它有时只能起作用？

- 亚历山大

Answer 1

基于Satpals回答：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

当您处理动态创建的行时，代码应该是这样的。

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

.on click事件并不总是处理动态添加的表行

2 个答案: