On a webpage, there are two tables being displayed. The first table loads along with the entire page, while the second table is loaded later on using ajax.
Each row in both tables contains links.
Upon clicking a link, the corresponding row in the table should be highlighted.
Highlighting rows in the first table works perfectly fine:
$(document).ready(function () {
$('#firstTable tr a').click(function (event) {
$('#firstTable tr').css("background-color", "white");
$(this).closest('tr').css("background-color", "silver");
});
});
However, encountering issues with highlighting rows in the second table. Attempted to utilize the .live() method but it does not respond to clicks:
function onLoad() {
$('#secondTable tr a').live('click', function () {
highlChooseRow();
});
}
function highlChooseRow() {
$('#secondTable tr').css("background-color", "white");
$(this).closest('tr').css("background-color", "silver");
}
What could possibly be wrong with my approach?