Question

I’m experimenting with .live() and .delegate() for elements that are added to DOM well after my JS is loaded.

This works:

$(".mouseRow tbody tr").live("click", function(event) { });

But this does not work and no errors are given, which makes me think it is a DOM timing thing:

$(".mouseRow").delegate("tbody tr", "click", function(event) { });

Am I calling the .delegate() function incorrectly, perhaps with the “tbody tr” statement? Or is this a problem with the DOM timing since the elements do not exist yet (which is why I used live() in the first place)?

Answer 1

If .mouseRow is a class you’re applying to tr elements, you want: You’ve said in the comments that mouseRow is a class on the table element within which you want to hook clicks on tr elements. If the table.mouseRow elements will exist as of when you’re hooking up your handlers, you probably want this:

$("table.mouseRow tbody").delegate("tr", "click", function(event) { ... });

That hooks the click event on tbody within the table.mouseRow, and when it occurs checks the chain of elements from the one actually clicked up to tbody to see if any of them match the selector tr. If so, it calls the event handler with this referencing the row in question.

Or as of jQuery 1.7, the recommendation is to use on for this sort of thing:

$("table.mouseRow tbody").on("click", "tr", function(event) { ... });

(Note that the order of arguments is slightly different.)

Either way, you execute that statement when the table.mouseRow tbody is already in the DOM. If it won’t be there yet, you need to go further up the DOM, perhaps all the way to document:

$("table.mouseRow tbody tr").live("click", function(event) { ... });
// or (1.7 onward):
$(document).on("click", "table.mouseRow tbody tr", function(event) { ... }));