trying to add hierarchy constraints to delegate()

Question

I've got a delegate statement that works like so:

$("body").delegate("tr[type='option']",'mouseenter',function(){

The problem is that it's grabbing elements from tables I don't want. So I tried:

$("body").delegate("table[class='ms-MenuUI'] > tr[type='option']",'mouseenter',function(){

Which isn't working at all (though I'm not getting any console errors). Just wondering how I can tighten this up so it's only grabbing table rows from the specific table I want.

NOTE: the table does not exist in the DOM on page load, and is dynamically created/destroyed after the doc is ready, thus the need for delegate to begin with.

EDIT: As per my comment below, I'm using [] because the attribute of the parent is variable, and it's my understanding that they should work interchangeably with the attribute short-hand (i.e. '.'). A sample of the dynamic code would be:

$('body').delegate('table[' + parentAttribType + "='" + parentAttribValue + "'] > tr[" + rowAttrbType + "='" + rowAttribValue + "']"), 'mouseenter', function(){

Thanks!

Answer 1

You should use the class selector . for classes, not the attribute selector []:

$("body").delegate("table.ms-MenuUI > tr[type='option']",'mouseenter',function(){

Also, your browser may be introducing a tbody element. If you can, remove the >.

Answer 2

It should work:

$("table[class=ms-MenuUI] tr td").live('mouseenter',function(){
  /* yout code*/
});

The live is like bind but works on dhtml.

Answer 3

Use this, the event handler gets bound to the table using 'tr td' as its event target.

$('table[class=ms-MenuUI]').delegate('tr td', 'mouseenter', function() {

});

FYI -

If you are going to use $('body').delegate('', ) then its probably better to use .live() which binds event handlers to the document level anyways.

EDIT: Sorry didn't read your entire post, delegate the event to an element that either contains the table, or use .live().