Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does jQuery have a handleout for .delegate('hover')?

I am trying to use:

$('mydiv').delegate('hover', function() {       $('seconddiv').show();   }, function() {       //For some reason jQuery won't run this line of code       $('seconddiv').hide();   }); 
like image 840
Chris Abrams Avatar asked Jan 23 '11 04:01

Chris Abrams


People also ask

Does jQuery handle hover?

The hover() is an inbuilt method in jQuery which is used to specify two functions to start when mouse pointer move over the selected element.

Is hover deprecated in jQuery?

hover() is deprecated #66.

What does the hover function in jQuery do?

Definition and Usage The hover() method specifies two functions to run when the mouse pointer hovers over the selected elements. This method triggers both the mouseenter and mouseleave events. Note: If only one function is specified, it will be run for both the mouseenter and mouseleave events.

What is the delegate () method in jQuery?

The delegate() Method in jQuery is used to add one or more event handlers to the specified element that are children of selected elements and are also used to specify a function to run whenever the event occurs.


2 Answers

User113716's great answer will no longer work in jQuery 1.9+, because the pseudo-event hover is no longer supported (upgrade guide).

Also since jQuery 3.0 delegate() for binding events is officially deprecated, so please use the new on()(docs) for all event binding purposes.

You can easily migrate user113716's solution by replacing hover with mouseenter mouseleave and switching to the on() syntax:

$('mydiv').on('mouseenter mouseleave', 'seconddiv', function(event) {     $(this).toggle( event.type === 'mouseenter' );   }); 

If your problem is more complex than a simple toggle, I suggest binding two separate events:

$('mydiv').on('mouseenter', 'seconddiv', function( event ) {     // do something }).on('mouseleave', 'seconddiv', function( event ) {     // do something different }); 

NB: Since hover was removed in v1.9 and on() was introduced in v1.7, there is no real need for a solution using delegate() - but if you like it for some reason; it is still there (for now) and does the job:

$('mydiv').delegate('seconddiv','mouseenter mouseleave', function(event) {     $(this).toggle( event.type === 'mouseenter' );   }); 
like image 137
DerVO Avatar answered Oct 24 '22 13:10

DerVO


With delegate()(docs) , you assign it to a container, and the first argument is the element that should trigger the event.

Also, .delegate() accepts only one function, so for the hover event you need to test the event.type to determine show()(docs) or hide()(docs) .

$('.someContainer').delegate('.someTarget','hover', function( event ) {     if( event.type === 'mouseenter' )           $('seconddiv').show();       else         $('seconddiv').hide();   }); 

For show/hide, a shorter way to write this is to use toggle()(docs), which can accept a switch argument where true means show and false means hide:

$('.someContainer').delegate('.someTarget','hover', function( event ) {     $('seconddiv').toggle( event.type === 'mouseenter' );   }); 

Note that the mouseenter event is reported as of jQuery 1.4.3. If you're using 1.4.2, it will be reported as mouseover.


EDIT:

If I'm understanding your comments below, you'd have something like this (using the proper selectors of course).

$('mydiv').delegate('seconddiv','hover', function( event ) {     $(this).toggle( event.type === 'mouseenter' );   }); 
like image 20
user113716 Avatar answered Oct 24 '22 14:10

user113716