CODEWITHSUNDEEP
jqueryhover
behz4d
behz4d

Reputation: 1849

using on() with hover - jQuery

This is what I have:

$('#blah').hover(function(){
    $('etc').show();
}, function(){
    $('etc').hide();
});

This works just fine, now I want the exact above code working live with on() method:

$('#blah').on('hover', function(){
    $('#etc').show();
}, function(){
    $('#etc').hide();
});

But this is not working, anybody knows why? but also this works:

$('#blah').on('hover', function(){
    $('#etc').show();
});

When I'm using on() method, the callback function is not working, so I'm using mouseover() and mouseleave() with on() and it's working, I just wanted to know why hover callback is not working with on(), that's so simpler than using 2 events....

Thanks

Upvotes: 0

Views: 760

Answers (7)

Taufik Nurrohman
Taufik Nurrohman

Reputation: 3409

From the JQuery source code, hover is not included in the event list that triggered leading to JQuery .on()

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
    "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {

    // Handle event binding
    jQuery.fn[ name ] = function( data, fn ) {
        return arguments.length > 0 ?
            this.on( name, null, data, fn ) :
            this.trigger( name );
    };
});

It is because .hover() is just a shortcut for JQuery .mouseenter() and .mouseleave()

jQuery.fn.hover = function( fnOver, fnOut ) {
    return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
};

I hope this brief explanation provides little guidance.

Upvotes: 2

Ravi Gadag
Ravi Gadag

Reputation: 15881

from Jquery docs. Jquery on

Deprecated as of jQuery 1.8: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.

$("div.test").on({
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});

Upvotes: 3

EnterJQ
EnterJQ

Reputation: 1014

Use toggle() 

$('#blah').on('hover', function(){
   $('#etc').toggle();
});

Upvotes: 0

complex857
complex857

Reputation: 20753

It's because hover is not really a browser event, in fact its just a shorthand for calling 

 $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

Using with the .on('hover') form have been deprecated as of version 1.8.

Upvotes: 1

Adil
Adil

Reputation: 148180

Use mouseenter and mouseleave for hover. Check using hover with on here.

$("#blah").on(
{
    mouseenter: function() 
    {
        //stuff to do on mouseover
    },
    mouseleave: function()
    {
        //stuff to do on mouseleave
    }
});

Use toggle to show / hide,

$('#blah').on('hover', function(){
    $('#etc').toggle();
});

Upvotes: 1

Dipesh Parmar
Dipesh Parmar

Reputation: 27382

Yes it will not work because when you use .on() with hover then hover event just have one call-back function instead you can use multiple events in .on()

Try

$("DOM").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    }
});

Upvotes: 0

K D
K D

Reputation: 5989

use

 jQuery.on("hover","#blah", function..)

Or you can use toggle feature of jQuery too

Upvotes: 0

Related Questions