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.
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');
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");
}
});
It is not possible to use both .on() and hover event at the same time! :(
As a fallback you can use this script:
$("div.settings-container").on({
mouseenter: function () {
alert("Mouse Over!");
},
mouseleave: function () {
alert("Mouse Out!");
}
});
Try mouseenter and mouseout to delegate the events instead... It is not possible to use .hover() with .on() ..
From additional notes on jquery docs on 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.
Thus when you use hover with on, it assumes you are using this hover which is
A function to execute when the mouse pointer enters or leaves the element.
Thus either use,
$(document).on('hover', 'ul.settings-links', function (e) {
if (e.type == "mouseenter") {
alert("show");
} else {
alert("hide");
}
});
OR
$('body').on({
mouseenter: function() {
$(this).find('ul.settings-links').fadeIn();
},
mouseleave: function() {
$(this).find('ul.settings-links').fadeOut();
}
}, 'div.settings-container');
You cannot use the hover which accepts two functions as parameters.
check this FIDDLE out
$('a.hover-me').on({
mouseenter: function(){
$('.test').show();
},
mouseleave: function(){
$('.test').hide();
}
});
