using hover() on dynamically created elements

Question

I want to use jQuery's hover() on dynamically created elements. I tried the below but no success. How can I do this? I can not use mouseenter and mouseleave because this page will be embedded inside an iframe.

$(document).on('hover', '.dynamic', function(){
    //do
});

Arun P Johny · Accepted Answer · 2015-07-06 04:16:19Z

3

The hover() is not an event, it is a utility method used to register both mouseenter and mouseleave event handlers.

The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.

So you can use mouseenter and mouseleave event handlers for the dynamic elements

$(document).on('mouseenter', '.dynamic', function () {
    //do
}).on('mouseleave', '.dynamic', function () {
    //do
});

If you want to have a single handler for both then

$(document).on('mouseenter mouseleave', '.dynamic', function () {
    //do
});

edited Jul 6, 2015 at 4:16

answered Jul 6, 2015 at 4:14

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Becky Over a year ago

thanks. But mouseenter and mouseleave will not work when the page is embedded in an iframe?

Arun P Johny Over a year ago

@Becky if you see the above quote, the hover method just registers both these handlers... so if hover works, the above code also should work fine

Becky Over a year ago

I've read that mouseenter and mouseleave will not work when the page is embedded in an iframe. thank you Arun. I'll give it a go. :)

Collectives™ on Stack Overflow

using hover() on dynamically created elements

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related