javascript - Detect Click on Table Row from Generated Table with JQuery - Stack Overflow

admin管理员组

文章数量:1345314

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

• javascript
• jquery
• html

Share Improve this question Follow asked Mar 24, 2014 at 19:37 billabrian6billabrian6 43133 gold badges1010 silver badges2525 bronze badges 1

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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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

本文标签： javascriptDetect Click on Table Row from Generated Table with JQueryStack Overflow