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

Reported by:	oyejorge	Owned by:	brandon
Priority:	low	Milestone:	1.6
Component:	event	Version:	1.4
Keywords:	live mouseenter mouseleave	Cc:
Blocked by:		Blocking:

Description

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!

Attachments (1)

mouseenter.html (1.2 KB) - added by oyejorge January 21, 2010 12:04AM UTC.

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

Change History (4)

Changed August 08, 2010 12:09AM UTC by Licensed to Gil comment:1

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

Changed October 25, 2010 07:51AM UTC by SlexAxton comment:2

milestone:	1.4 → 1.5
priority:	major → low
status:	new → open

Changed April 17, 2011 05:34PM UTC by john comment:3

milestone:	→ 1.6

Changed April 17, 2011 05:34PM UTC by Gilmore Davidson comment:4

resolution:	→ fixed
status:	open → closed

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

Changeset: a9b81d759af3a4574a42ca1de93be1247f7953a2

Side navigation