jQuery ajax 添加数据时，<tr> 单击事件不起作用 [重复]

【问题标题】：The <tr> click event is not working when data added by jQuery ajax [duplicate]jQuery ajax 添加数据时，<tr> 单击事件不起作用 [重复]
【发布时间】：2019-01-01 15:01:47
【问题描述】：

这里是 mvc webgrid 代码：

@grid.GetHtml(
                displayHeader: false,
                htmlAttributes: new { id = "Grid1" },
                 tableStyle: "webgrad4",
                columns: new[] {
              gridRight.Column(columnName: "Dept_ID", header: "Dept ID"),
              gridRight.Column(columnName: "Inv_ID", header: "Inv ID"),
                   gridRight.Column(columnName: "Inv_NAME", header: "Inv Name"),
                    gridRight.Column(columnName: "U_ID", header: "User ID"),
                     gridRight.Column(columnName: "SEC_ID", header: "SEC ID")
                    })

这个javascript代码：

$(document).ready(function () {
    $('#Grid1 tr').click(function () {
    alert("test");
        $(this).addClass('selectRow');
        var rowId = $(this).closest("tr").find("td:first").html();
        var rowId2 = $(this).closest("tr").find("td:nth-child(2)").html();
        $("#RightRecID").val(rowId);
        $("#RightRecID2").val(rowId2);
        $("#RightGridID").val("Grid1");
        $('#Grid1 tr').not(this).removeClass('selectRow');
    });
});

默认情况下，当数据加载到 webgrid 时，上述代码运行良好。但是在下面的 ajax 代码生成表格行的数据并附加到 webgrid 之后，点击事件不起作用。

 $.each(response, function (j, dataval) {
      $("#Grid1").append('<tr><td>' + (dataval.DEPT_ID == null ? "" : dataval.DEPT_ID) + '</td> + <td>' + dataval.Inv_ID + '</td> +<td>' + dataval.Inv_NAME + '</td><td>' +
            (dataval.U_ID == null ? "" : dataval.U_ID) + '</td><td> ' + (dataval.SEC_ID == null ? "" : dataval.SEC_ID) + '</td></tr>');
        pageCount = dataval.PageCount;      
    });

我也尝试像这样添加 ajax 添加的 tr 的 id：

  $.each(response, function (j, dataval) {
      $("#Grid1").append('<tr id = "newRowID"><td>' + (dataval.DEPT_ID == null ? "" : dataval.DEPT_ID) + '</td> + <td>' + dataval.Inv_ID + '</td> +<td>' + dataval.Inv_NAME + '</td><td>' +
            (dataval.U_ID == null ? "" : dataval.U_ID) + '</td><td> ' + (dataval.SEC_ID == null ? "" : dataval.SEC_ID) + '</td></tr>');
        pageCount = dataval.PageCount;

    });

然后为上面的代码创建了一个简单的测试：

$(document).ready(function () {
    $('#newRowID').on('click', function () {
        alert("test1");
    });

click事件完全没有触发alert，从F12键调试可以看到id "newRowID"被添加了，但是无法识别，有没有其他办法解决这个问题？谢谢

已编辑：最终，ajax 动态创建的表格行应该使用与默认表格数据的点击事件相同的代码，如下所示：

$(document).ready(function () {
$('#newRowID').on('click', function () {
    alert("test1");
    $(this).addClass('selectRow');
    var rowId = $(this).closest("tr").find("td:first").html();
    var rowId2 = $(this).closest("tr").find("td:nth-child(2)").html();
    $("#RightRecID").val(rowId);
    $("#RightRecID2").val(rowId2);
    $("#RightGridID").val("Grid1");
    $('#Grid1 tr').not(this).removeClass('selectRow');

});

【问题讨论】：

• 使用 jquery on 连接
• 直接绑定仅适用于创建绑定时 DOM 中存在的元素。重复的帖子解释了如何使用委托事件绑定来处理未来创建的元素。
• 从F12可以看到的id("neRowID")只加到ajax生成的表数据中，原来的tr行没有这个id，所以从技术上讲，这个应该可以工作，但根本不工作。
• 您要么需要使用委托事件（参见上面的链接），要么在创建和附加事件时绑定事件。它不起作用的原因是，当您绑定事件时，DOM 中尚不存在该元素，因此选择器 $('#newRowID') 没有找到任何东西。选择器在运行时只查找当前存在于 DOM 中的元素，并在事后自动处理插入到 DOM 中的元素。