The 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');

});

Direct bindings only work on the elements that exist in the DOM at the time that you create the bindings. The duplicate post explains how you can use a delegate event binding to handle for future elements created. — Taplar, Jul 24 '18 at 21:47
From F12, I can see the id ("neRowID") of only added to the table data generated by ajax, the original tr row doesn't have this id, so technically, this should work, but it is not working at all. — green, Jul 24 '18 at 21:48
You either need to use _delegated events_ (see link above) or bind the event when you create and append it. The reason it's not working is that the element does not yet exist in the DOM when you are binding the event so the selector `$('#newRowID')` isn't finding anything. Selectors only find elements that currently exist in the DOM when they are run, and automatically work on elements inserted in the DOM after the fact. — jmoerdyk, Jul 24 '18 at 21:48

score 2 · Accepted Answer · answered Jul 24 '18 at 21:59

2

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

answered Jul 24 '18 at 21:59

Alexander Valach

36
1
1
6

1

Thanks a lot, this is simple solution, I will try this solution tomorrow when I back to my office and let you know the result then. – green Jul 24 '18 at 22:05
1

If this solution works, then the id ("newRowID") must be added in order to make it work. So considering the click event ($('#Grid1 tr').click(function () { )for the default data, I need to create another click event for the table rows added by the ajax. basically, I need to copy the codes under $('#Grid1 tr').click(function () { to the new click event used by the dynamic data generated by ajax. Are there any other solutions? – green Jul 24 '18 at 22:19
1

If this solution works, then the id ("newRowID") must be added in order to make it work. So considering the click event ($('#Grid1 tr').click(function () { )for the default data, I need to create another click event for the table rows added by the ajax. basically, I need to copy the codes under $('#Grid1 tr').click(function () { to the new click event used by the dynamic data generated by ajax. Are there any other solutions? please check my new added comments in the original post. – green Jul 24 '18 at 23:06
1

Hi Alexander, thank you so much for your solution, it works very well. – green Jul 25 '18 at 20:01
Feel welcome. :) – Alexander Valach Jul 26 '18 at 11:11

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

1 Answers1