当 jQuery ajax 添加数据时，<tr> 单击事件不起作用

Question

这里是 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 代码生成 table 行的数据并附加到 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");
    });

点击事件根本不触发alert，F12键调试可以看到添加了id "newRowID"，但是无法识别，请问有没有其他办法解决问题？谢谢

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

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

});

Answer 1

尝试使用委托事件而不是本文提到的直接事件： https://jqueryhouse.com/jquery-on-method-the-issue-of-dynamically-added-elements/

你的最后一个函数应该是：

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

当 jQuery ajax 添加数据时，<tr> 单击事件不起作用

The <tr> click event is not working when data added by jQuery ajax

asp.net-mvc

jquery

asp.net-ajax

webgrid