Question

这是mvc网络网格代码：

@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之后，clicking事件不起作用。

 $.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;      
    });

我还尝试添加添加了tr的ajax的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事件根本不会触发警报，从F12键调试中，我可以看到添加了id“ newRowID”，但无法识别，是否还有其他方法可以解决此问题？谢谢

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

$(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添加数据时，click事件不起作用

1 个答案: