jQuery delegate table rows selector

Question

I have a table which may contain other inner tables (it's not possible to edit generated markup). I want to create a delegate function for row mouseenter and mouseleave which only triggers for the associated main table rows (and not inner tables rows), as following:

  $("#tableid").delegate("tr", "mouseenter mouseleave", function(e) {
    //do stuff here
  });

But with this selector it also selects the inner table rows, so how can I modify the selector to avoid selecting inner table rows?

Answer 1

You can use .delegate() with a slightly different selector, like this:

$("#tableid").delegate("#tableid > tbody> tr", "mouseenter mouseleave", function(e) {
  //do stuff, for example $(this).toggleClass("hover");
});​

This works since you want <tr> elements that are direct child rows, but there's a <tbody> in-between you need to account for. You can test a working demo here.