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

Question

Here is the mvc webgrid codes:

@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")
                    })

and this javascript codes:

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

The above codes are working well when the data is loaded to webgrid in default. but after the following ajax codes generating the data of table rows and appended to the webgrid, the clicking event is not working.

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

I also tried to add the id of the ajax added tr like this:

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

    });

and then created a simple test for the above codes:

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

The click event doesn't trigger the alert at all, from F12 key debug, I can see the id "newRowID" is added, but it can not be recognized, are there any other way to resolve this issue? thanks

edited: eventually, the table rows created by ajax dynamically should use the same codes as the click event of default table data like this:

$(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

Try to use delegate event instead of direct event as mentioned in this article: https://jqueryhouse.com/jquery-on-method-the-issue-of-dynamically-added-elements/

Your last function should be:

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