I manage mouse-over and mouse-out for DOM elements,
$(".selector").hover(function(){
console.log('in');
},function(){
console.log('out');
});
But it doesn't work for dynamic content, how can i do same for dynamic elements.
I manage mouse-over and mouse-out for DOM elements,
$(".selector").hover(function(){
console.log('in');
},function(){
console.log('out');
});
But it doesn't work for dynamic content, how can i do same for dynamic elements.
You can use the .on()
method. Nnote that hover
is a shorthand for mouseenter
and mouseleave
events and not mouseover
and mouseout
events.
Also, performance-wise, it would be better to select a closing static parent element instead of the document
object.
$(document).on({
mouseenter: function() {
console.log('in');
},
mouseleave: function() {
console.log('out');
}
}, '.selector');
$(document).on("mouseleave", ".selector", function(){
//code here
});
$(document).on("mouseenter", ".selector", function(){
//code here
});
The on
function will attach an event handler that listens for the specified event (first argument) on the selected object. When the event is fired and bubbles to the selected element (document in our case), it checks if the target element matches the second argument (the selector). If the target matches the function supplied is fired. In my example I select document
however you should select the closest non dynamic parent available for better performance.
$(".selector").mouseover(function(){
console.log('in');
});
$(".selector").mouseleave(function(){
console.log('in');
});