Jquery doesn't recognize a printed ID

Question

I can't manipulate the cells of my table with JQuery

I have a jsp where I call other jsp with a JQuery/Post which prints a table dynamically

$(document).ready(function(){     
    var usuario =  $("#Id").text();
    var s = "13";
    $.post("../Querys/select_subcategoria.jsp",{s:s,usuario:usuario})
        .done(function(data) {
            $("#tab-index-div").append(data);
        });
});

it appends into a div.

then I have this code that helps to do a click in the hole tr and then it triggers a link

$('#tab-search tr').click(function() {
    var href = $(this).find("a").attr("href");
    if(href) {
        window.location = href;
    }
});

It works if I print the table in the same JSP, but doesn't work if I print it in the other JSP, I tried to append the data into a table, and just append the <tr>, but doesn't work too.

I think JQuery does not recognize the ID of the table

If anyone has any ideas it would be a great help.

Answer 1

Your click() won't handle dynamically added elements, you have to use on() method like this :

$('#tab-search').on('click','tr a', function(e) {
    var href = $(this).attr("href");
    if(href) {
        window.location = href;
    }
)}

I didn't test but this is the idea.

In older jQuery version we had the live() function to manage these, but it is deprecated on newer versions.

Good luck

Answer 2

try this:

$('#tab-search').delegate('tr', 'click', function() {
    var href = $(this).find("a").attr("href");
    if(href) {
        window.location = href;
    }
});