when hover over a child of an element, mouseleave fires when using live or delegate

[Anders Bondehagen <anders@…>]

This works as expected in 1.5 and also in 1.6 if using bind instead.

steps:

1. bind a mouseleave event to a div using live or delegate
2. hover over a child element of the div, the mouseleave event should not trigger, but it does!

test ​http://jsfiddle.net/NNLkN/10/

browsers tested: chrome 11 and firefox 4.0.1 on windows 7

[dmethvin]

Gaaah! I'll take a look at this one, most likely due to the recent jiggling of withinElement().

[Anders Bondehagen <anders@…>]

The problem seems to have been introduced in the following commit ​https://github.com/brianlovesdata/jquery/commit/5f816ffca67e7fdcedcff580d19c4a7d7994c48a

[Timmy Willison]

#9143 is a duplicate of this ticket.

[anonymous]

The behavior I'm seeing is that, when I use $.live to bind "mouseenter mouseleave", the "mouseover" and "mouseout" events are reported in event.type instead of "mouseenter" or "mouseleave".

Using $.bind, the correct event types are reported.

Example: ​http://jsfiddle.net/neonsilk/CAZkw/

[T.J. Crowder]

Ran into this today as well. Just because I already had it, here's another example if it's useful: ​using `live` vs. ​using `bind` (via hover).

[Rick Waldron]

#9211 is a duplicate of this ticket.

[John Resig]

Make sure that mouseenter/mouseleave fire on the correct element when doing delegation. Fixes #9069.

Changeset: 419b5e5e2a0d376e71c3f37bf9a3d96f3b4a67f2

[Bill]

I believe this ticket should remain open. I am seeing this same bug using 1.6.1 when using $('#el').live("mouseleave", function(){});

Event triggers when hovering over a child div in an AJAX generated div. Bind has no response with AJAX DOM elements, and as such - does not react in this instance.

[Rick Waldron]

@Bill Can you test with this: ​http://code.jquery.com/jquery-git.js

[Bill]

Replying to Bill:

I believe this ticket should remain open. I am seeing this same bug using 1.6.1 when using $('#el').live("mouseleave", function(){});

Event triggers when hovering over a child div in an AJAX generated div. Bind has no response with AJAX DOM elements, and as such - does not react in this instance.

Testing with JQ 1.5.1 provides successful (expected) action using identical code. Recommend re-opening this ticket. I will have to revert back to 1.5x for the live site as this controls my auto-suggest search box on a live site

[anonymous]

Replying to rwaldron:

@Bill Can you test with this: ​http://code.jquery.com/jquery-git.js

• No change. See my reply i can pass the website URL over email for you to see this action

[Rick Waldron]

Yes, please provide your example case

[Bill]

Replying to rwaldron:

Yes, please provide your example case

Rwaldron, the sample site is ​http://www.wiki-pet.com/ - but since this is a live site, i have already reverted back to 1.5.1 The area of interest is the main search. You will see the correct behavior now auto-suggest box code is as follows:

function getSearchCB(data){

var newHTML = ; var results = data.results; var total = data.total; var exc_time = data.exc_time; var msg = data.msg; var err = data.err; var stats_div = '<div class="aj_search_stats"><p>'+total+' results ('+exc_time+' sec)</p></div>'; if(err==0&&total>0){

$.each(results,function(object, data_set){

var name = data_set.name; var r_link = data_set.r_link; var type_name = data_set.type_name; var sec_link = data_set.sec_link; var accuracy = data_set.accuracy; newHTML += '<div class="aj_search_res">'; newHTML += '<h3 class="sj_big_link"><a href="'+r_link+'">'+name+'</a> <span class="sr_helper_txt"> - '; newHTML += type_name+' '+accuracy+'%</span></h3></div>'+stats_div;

});

} else{ newHTML = '<div class="aj_search_res"><div class="aj_sr_inner">'+msg+'</div></div>'; } if($('#aj_search_results').length>0){ $('.aj_sr_inner').html(newHTML); } empty the old results else{ $('.gs_wrapper').append('<div id="aj_search_results"><div class="aj_sr_inner">'+newHTML+'</div></div>'); }

}

Browser: Firefox 3.6x

[Rick Waldron]

Sorry, but I'm not sure how that could ever possibly work with those syntax errors.

Also, I can't create a reproduction from this - there is nothing here that illustrates how the handlers themselves were added. Based on your description I'd recommend that you re-evaluate your approach. Using live to attach handlers this way was superseded by delegate() which allows one handler to be added to a parent container that reacts to events of it's children.

[Bill]

Replying to rwaldron:

Sorry, but I'm not sure how that could ever possibly work with those syntax errors.

Also, I can't create a reproduction from this - there is nothing here that illustrates how the handlers themselves were added. Based on your description I'd recommend that you re-evaluate your approach. Using live to attach handlers this way was superseded by delegate() which allows one handler to be added to a parent container that reacts to events of it's children.

The code works flawlessly in JQ 1.5.1 and not at all in 1.6.1 - - i noticed that the comments i had in my own code were "slash stripped" on the previous comment, which is where you are seeing syntax errors. I just copied it over without re-formatting at all.

[Bill]

Replying to Bill:

Replying to rwaldron:

Sorry, but I'm not sure how that could ever possibly work with those syntax errors.

Also, I can't create a reproduction from this - there is nothing here that illustrates how the handlers themselves were added. Based on your description I'd recommend that you re-evaluate your approach. Using live to attach handlers this way was superseded by delegate() which allows one handler to be added to a parent container that reacts to events of it's children.

The code works flawlessly in JQ 1.5.1 and not at all in 1.6.1 - - i noticed that the comments i had in my own code were "slash stripped" on the previous comment, which is where you are seeing syntax errors. I just copied it over without re-formatting at all.

Suggestion to use delegate() works across safari 5, FF 3.6, IE8, and Chrome - thats all i've tested as of now. Good suggestion. A suggestion would be to update the docs (if they aren't already updated) to transfer the old-school live() calls to delegate() all together when using JQ 1.6+ to avoid this confusion with other developers

Thanks for your time and diligence on this matter.

[Rick Waldron]

I can't tell you how stoked I am that you had success with that (I've had a frustrating afternoon of my own :D )

[Rick Waldron]

#10192 is a duplicate of this ticket.

[tigbro]

(Copy from #10192): When using jquery (edge) the event.type reports "mouseenter" in a "mouseover" event listener, when the mouse is moved over the node. This only occurs when the element also has a mouseenter event listener attached. Same is true for the combination "mouseleave" / "mouseout"

Here is a fiddle for reproduction: ​http://jsfiddle.net/fZeDZ/4/

This bug leads to a css problem when integrating jquery-mobile and angular-js.

Tobias

[dmethvin]

Reopened for verification that 1.7 really fixed the sucker. Thanks for the test cases!

[dmethvin]

Fixed in 1.7:

​https://github.com/jquery/jquery/commit/6a670df9e9b9e5cd278b390a2e99ac179307a4e9

[dmethvin]

#10989 is a duplicate of this ticket.