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');