jQuery function .on works in 1.8.3 but not in 1.9.1

Question

I have a function that works with jQuery 1.8.3 but when I upgrade to 1.9.1 it's not working anymore, but there's no change in documentation. Does somebody know how to fix this?

$(document).on("hover", "#cart-left", function(){
    $("#cart").addClass('active');
});

http://jsfiddle.net/michalcerny/R9HZp/

Thanks for support!

Answer 1

In 1.9.1 you should use mouseover

$(document).on("mouseover", "#cart-left", function(){
    $("#cart").addClass('active');
});

Answer 2

The status of the hover shorthand

As of jQuery 1.8 the hover shorthand has been deprecated. See the jQuery on() documentation:

Deprecated as of jQuery 1.8: The name "hover" used as a shorthand for the string "mouseenter mouseleave"

As of jQuery 1.9, the hover shorthand is unsupported. See the jQuery 1.9 Upgrade Guide

Alternative

In your case, it means you should use the mouseenter event. For example:

$(document).on("mouseenter", "#cart-left", function(){
     $("#cart").addClass('active');
});

See jsFiddle demo

Making better usage of on()

It's also worth noting that unless the selector passed to on() refers to elements that are added to the DOM dynamically (i.e. after page load), there's no need to delegate the handler to the document. Instead, in this case you can probably bind the handler function directly to the element like so:

$("#cart-left").on("mouseenter", function(){
    $("#cart").addClass('active');
});

Answer 3

The problem is not on the "on" function, but rather the "hover" pseudo-event that has been deprecated (and removed) in 1.9.1: http://jquery.com/upgrade-guide/1.9/#hover-pseudo-event