Jquery on hover not functioning

Question

I'm changing my codes to be compatible with jQuery 1.8 and I'm stuck with this hover which doesn't work. When I used then same thing with a click it worked. Here is my code, can anyone tell me where I'm going wrong?

$(document).on('hover', '.top-level', function (event) {
  $(this).find('.actionfcnt').show();
  $(this).find('.dropfcnt').show();
}, function () {
  $(this).find('.dropfcnt').hide('blind', function () {
    $('.actionfcnt').hide();
  });
});

Solution 1

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.

Source: http://api.jquery.com/on/#additional-notes

That pretty much says it all, you cant use "hover" for that:

$(document).on('mouseenter','.top-level', function (event) {
    $( this ).find('.actionfcnt').show();
    $( this ).find('.dropfcnt').show();
}).on('mouseleave','.top-level',  function(){
    $( this ).find('.dropfcnt').hide('blind', function(){
        $('.actionfcnt').hide();
    });
});

Solution 2

there is no "hover" event. there is .hover() function that takes 2 callbacks (as in your example).

Solution 3

.on function has only 3 parameters : http://api.jquery.com/on/

If you don't need your handlers be bound to dynamically added elements as well, then you may use the good old hover function with 2 event handlers.

$('.top-level').hover(function (event) { 
  $(this).find('.actionfcnt').show();
  $(this).find('.dropfcnt').show();
}, function (event) {   
  $(this).find('.dropfcnt').hide('blind', function(){
    $('.actionfcnt').hide();
  });
});​

By the way, $(selector).hover(handlerIn, handlerOut) is shorthand for $(selector).mouseenter(handlerIn).mouseleave(handlerOut);.

If you need to, then use on for mouseenter and mouseleave events:

$(document).on('mouseenter', '.top-level', function (event) { 
  $(this).find('.actionfcnt').show();
  $(this).find('.dropfcnt').show();
}).on('mouseleave', '.top-level', function (event) {   
  $(this).find('.dropfcnt').hide('blind', function(){
    $('.actionfcnt').hide();
  });
});​

Solution 4

Try:

$(".top-level").on({
    mouseenter: function (event) {
        $( this ).find('.actionfcnt').show();
        $( this ).find('.dropfcnt').show();
    },
    mouseleave: function (event) {
        $( this ).find('.dropfcnt').hide('blind', function(){
            $('.actionfcnt').hide();
        });
    }
});

OR

$(".top_level").on("hover", function(event) {
  if(event.type == "mouseenter") {
    $( this ).find('.actionfcnt').show();
    $( this ).find('.dropfcnt').show();
  }
  else if (event.type == "mouseleave") {
    $( this ).find('.dropfcnt').hide('blind', function(){
        $('.actionfcnt').hide();
    });
  }
});

Solution 5

Try

$('.top-level').hover(function (event) {
        $( this ).find('.actionfcnt').show();
        $( this ).find('.dropfcnt').show();
}, function(){
        $( this ).find('.dropfcnt').hide('blind', function(){
            $('.actionfcnt').hide();
        });
});

View more solutions

Comments

[Param Veer]

so i cant use hover? instead i have to use 'mouseenter'

[Param Veer]

suppose there is a ajax call and the content of .top-level is replaced with new then also this mouseenter would work?

[nbrooks]

@param Yes this will work fine, this syntax still fully supports delegated events (events triggered by elements which weren't in DOM at time of function def). This will accomplish what you want for dynamically generated elements.

[Param Veer]

thanks i appreciate your answer and @nbrooks answer both . both are correct , thanks for such detail explanation

[Param Veer]

thanks you for the answer :) just checked it using dynamic content , its working perfect

[nbrooks]

@ParamVeer Glad it was useful! :)

[Muhammad Riyaz]

Thanks for sharing ! Works fine ! :)

[Operator]

Imagine if all answers could be this concise and straight to the point. Great job!

[John M.]

This thing was burning my head for days, i was 100% that my code was working and it did when I replaced "hover" with mouseenter. I still don't get why they removed when they could just improve the name or at least throw a damn error. Anyway Thanks a lot man!