Detect Click on Table Row from Generated Table with JQuery

Question

I am trying to detect a click on the table rows, but I'm having problems. The table is generated from a javascript file and is placed inside a div inside the html.This div is named 'tableOutput'. My jquery click function will work if I set it to 'tableOutput', but I set it to '#myTable', or '#myTable tr' it will not do anything. Any advice? Thanks!

Code that generates the table:

function loadUsers() {
$.getJSON("api/users", function(data) {
    var userTable = "\
        <table id=\"mt\" class=\"table table-hover\"><tr><th>User ID</th><th>User Name</th><th>Password</th><th>First Name</th><th>Last Name</th><th>Email</th><th>Phone</th><th>DOB</th><th>Enabled</th></tr>";
    var count = 1;
    $.each(data, function(key, value) {
        userTable = userTable + "<tr id=\"tr" + count + "\"><td>" + value["userID"] + "</td><td>" + value["userName"] + "</td><td>" + value["password"] + "</td><td>" + value["firstName"] + "</td><td>" + value["lastName"] + "</td><td>" + value["email"] + "</td><td>" + value["phone"] + "</td><td>" + value["dateOfBirth"] + "</td><td>" + value["enabled"] + "</td></tr>";
        count = count + 1;
    });
    userTable = userTable + "</table>";
    $("#tableOutput").html(userTable);
}
);
}

Code that detects the click:

$(document).ready(function() {
$('#dp1').datepicker();
loadUsers();

$('#mt tr').on("click", function(){
    alert($(this).attr("id"));
});
});

I think your table isnt there by the time that you bind the clicks, as getJSON is psudo-async — undefined
– undefined, Commented Mar 24, 2014 at 19:40

Adil · Accepted Answer · 2014-03-24 19:39:35Z

10

You need event delegation to bind event to dynamically added elements. Since you have static parent of the table the div with id tableOutput you can delegate event to it.

$('#tableOutput').on("click", '#myTable tr', function(){
    alert($(this).attr("id"));
});

Delegated events

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers, jQuery docs

answered Mar 24, 2014 at 19:39

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

billabrian6 Over a year ago

Thank you very much! I can't believe it was such an easy fix.

Collectives™ on Stack Overflow

Detect Click on Table Row from Generated Table with JQuery

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related