hover callback function with on() and binding?

Question

Hi im adding some elements dynamically, now im trying to bind and a hover() using on() but that does not seem to work with a callback function. any ideas?

jQuery:

$(document.body).on('hover', 'div.settings-container', function () {
     $(this).find('ul.settings-links').fadeIn();
}, function () {
     $(this).find('ul.settings-links').fadeOut();
});

the jsfiddle is simplified.

Answer 1

In jQuery, $(selector).hover(handlerIn, handlerOut) is just a shortcut for

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

hover is not an event, you need to use mouseenter and mouseleave instead.

$('body').on({
  mouseenter: function() {
     $(this).find('ul.settings-links').fadeIn();
  },
  mouseleave: function() {
     $(this).find('ul.settings-links').fadeOut();
  }
}, 'div.settings-container');

Answer 2

Method "on" uses "hover" as shortcut for both events - mouseenter and mouseleave use event.type to detect them

$(document).on('hover', 'a.hover-me', function (e) {
    if (e.type == "mouseenter") {
        alert("show");
    } else {
        alert("hide");
    }
});​

Fiddle