live mouseenter/mouseleave events don't fire as expected when nested

[oyejorge]

I found that when using the mouseenter/mouseleave events with the .live() method, the results were not the same as if I used the .bind() method.

When using the bind() method a nested mouseenter will not trigger the outer mouseleave. But when using live() the outer mouseleave will be triggered.

See attached test document.

Thanks for this amazing product!

[oyejorge]

Shows differences between bind() and live() with mouseenter/mouseleave

[Licensed to Gil]

I've also found this issue and narrowed it down - it only occurs when the parent and child elements have the events bound with the same selector.

Example:

// Problem occurs:
$('#outer, #inner').live('mouseenter mouseleave', handler);

// No problem:
$('#outer').live('mouseenter mouseleave', handler);
$('#inner').live('mouseenter mouseleave', handler);

Basically, the live event handler code in jQuery is only checking if the selectors are different instead of checking the parent/child relationship.

I've got a quick patch here:

​http://github.com/gilmoreorless/jquery/commit/7774ed588fa04006cad2c729122816af6b019f2c

Cheers,

Gil

[Gilmore Davidson]

Added check for live mouseenter/mouseleave events if bound to nested elements with the same selector. Fixes #5884.

Changeset: a9b81d759af3a4574a42ca1de93be1247f7953a2