Question

I add table and it’s raws by jQuery when find result in database,and remove table when don’t find anything.It works correctly.

$("#AdminSearch").bind("change keyup", function() { 
       var url = "http://localhost/PmMusic/index.php/admin/ajax/admin_search/"+$("#AdminSearch").val();
        $.getJSON(url,function(data){
            if (data.length == 0)
            {
                $("#AutoSearch").hide(1000);
                $("#AutoSearchTable").remove();
            }
            else
            {
                $("#AutoSearchTable").remove();
                $("#AutoSearch").append('<table id="AutoSearchTable">');
                for(var i = 0;i < data.length && i < 5;i++)
                    {
                     $("#AutoSearchTable").append('<tr><td id="TableSearchTR'+i+'" value="'+data[i]+'">'+data[i]+'</td></tr>');
                    }
                $("#AutoSearch").append('</table>');
                $("#AutoSearch").show(1000);    
            }
        });

    });

but when I wanna select tr by following code

    $('tr').click(function(){
        alert("Hi");
    });

When I click on other table tr in page it works,but it can’t select tr which added by upper code).
where is the problem?

Answer 1

That’s because you’re binding with .click, which only applies to elements already in the page.

Change your code to

$('tr').live('click', function(){
    alert("Hi");
});