JQuery / Javascript Click Event not detected in Dynamic table

Question

I have looked through several answered questions, and tried to implement the solutions for my issue. I have a table being generated dynamically in javascript, that I then need a click event on in one column for each row.

I have tried the following:

$("#iFaceTbl tr").on('click', 'td.delInt', function(event) {
        console.log("Clicked.");
        let intId = event.target.id;
        console.log("ID was: " + intId);
    });

Wehre delInt is a class on the cell in each row.

When I run it, and watch the console, no click event is detected at all.

I'm sure I've done something wrong. For reference, here is the html, and javascript forming the table.

<table id="iFaceTbl"></table>

and

for (i=0; i < iFaces_count; i++) {
    let html_to_insert = '<tr><td>' + intArray[i] + '</td><td id="' + intArray[i] +'" class="delInt"><i class="fa fa-trash delInt" aria-hidden="true"></span></td></tr>';
    Currenthtml = Currenthtml + html_to_insert;

    if (i == iFaces_count-1) {
        iFaceTbl.innerHTML = Currenthtml;
    }
}

Any help is greatly appreciated.

Answer 1

Was able to solve my issue with the change shown here to my event trigger. I had to remove the icon portion in favor of a 'X'. Code now looks like this:

$(document).on('click', '#iFaceTbl td', function(event) {
    console.log("Clicked.");
    let intId = event.target.id;
    console.log("ID was: " + intId);
});