stop jquery live from hooking all the children.

Question

I can't stop the stupid thing from firing off an event when hovering over the children of item. I only want the event to fire via the div.item element, not the div.itemChild. This is driving me nuts please help.

event.stopPropigation does not work. nor does if(!$(event.source).is('itemChild')), for some reason is() alway returns false.

HTML

<div id="items">
    <div class="item">
        <div class="itemChild">
        </div>
        <div class="itemChild">
        </div>
    </div>
</div>

JS

//on hover event for each post
$('div.item', '#items').live('mouseover mouseout', function(event){
    if (event.type == 'mouseover'){
        //fire mouseover handler
    }
    else{
        //fire mouseout handler
    }
});

Is there a way to stop live from firing when hovering the children of div.item?

By the way the children of div.item cover it completely.

Basically I want this to act like .hover() but bind to things loaded via ajax.

Answer 1

It's not binding to the children. It's bubbling up to the parent.

Also, your syntax isn't correct. This:

$("div.item", "div.items")...

is saying "find me all the divs with class item that are descendants of divs with class of items. But you have no such divs (with class items). You have a div with an ID of items.

Combining all this try:

$("#items div").live("mouseover mouseout", function(event) {
  if ($(event.source).hasClass("itemChild")) {
    return false;
  } else if (event.type == "mouseover") {
    ...
  } else {
    ...
  }
});

Or, alternatively:

$("#items > div.item").live("mouseover mouseout", function(event) {
  if (!($this).is("div.item")) {
    return false;
  }
  ...
});

Basically, there are many ways to skin this cat but like I said in the first sentence, you have to understand that events bubble up until the handlers stop propagation, either directly (by calling event.stopPropagation() or by returning false from the event handler, which is equivalent to event.stopPropagation(); event.preventDefault();).

Also, if you're doing mouseenter and mouseout you might as well just use the hover() event that does both of those:

$("#items > div.item").live("hover", function(event) {
  // mouseenter
}, function(event) {
  // mouseout
});