After receiving an array of strings as a response from an SQL query, I am using JavaScript to dynamically add this data as rows to an HTML table:
loadUsers: function()
{ .
.
.
function displayUsersOnTable(response)
{
for(var i = 0; i < response.results.length; i++)
{
var contact = response.results[i];
var $newRow = $('<tr class="user-row">' +
'<td>' + contact.full_name + '</td>' +
'<td>' + contact.email + '</td>' +
'</tr>')
.data('user', contact);
$userTableBody.append($newRow);
}
}
}
In a separate function executed post the loadUsers call, I have added the following code snippet:
$('.user-row').click( function() {
window.alert("CLICKED");
});
Upon running my website, the click event does not seem to be registered. Interestingly, when selecting classes from other table elements such as table rows or headers, it works perfectly fine. My suspicion is on the dynamically generated nature of these table rows. Despite everything appearing in place upon inspecting element, I seem to be missing something crucial. Any ideas on what may be causing this issue?