时间戳

首页 > 解决方案 > .on 点击​​事件并不总是适用于动态添加的表格行

javascript - .on 点击​​事件并不总是适用于动态添加的表格行

问题描述

我有一个动态添加表行的表和一个 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加载数据。

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

-亚历山大

标签： javascriptjqueryasp.net

解决方案

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

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

推荐阅读