click event not triggered at the first click in jquery

Question

I have a main.php inside which another page (page1.php) is being called embedded in a div. I am dynamically updating the a table in page1 when the page1.php is loaded.

Now when I call a function on the click event of the table the funtion is called but the control doesn't enters in the click event of the table which I have called inside the function. However clicking the second time onwards the cotroll enters and works fine.

Following is the function in the js file

function highlight_table()
{
$(#table tr).click(function(){
alert("here");
});

Answer 1

Make sure you are calling this function when the DOM is loaded so that the event handler is attached the first time:

$(function() {
    highlight_table();
});

If the table is not present when the DOM is loaded but is later added using AJAX you might need to call this function in the success handler of your AJAX request.

Also you might need to use the .live() function so that when the table is updated the click handler is preserved (if needed):

$('#table tr').live('click', function() {
    alert('here');
});

Answer 2

You might also want to look into the .delegate() function as from what I've read, the creators of jQuery seem to be pushing users towards that over .live().