jQuery hover not working with dynamic elements

Question

Im getting data out of a database, and based on the number of matches, I want to output this:

 <div id='link_delete_holder' style='position:absolute;left:590px;top:10px'>
            <img id='link_delete' src='images/account_related/icons/link_delete.png'/>
        </div>

I want that image to be changing on hover, so I use this code:

$('#link_delete').hover(function(){
    $(this).attr('src', 'images/account_related/icons/link_delete_h.png');
}, function(){
    $(this).attr('src', 'images/account_related/icons/link_delete.png');
    });

Now, the problem is it only works on the first record (the first link_delete image that gets displayed), and seems like it doesn't apply to other images.

try to change id="link_delete" to class="link_delete" and then change $('#link_delete') to $('.link_delete') — Jason OOO
– Jason OOO, Commented Mar 4, 2014 at 19:00

Charles380 · Accepted Answer · 2014-03-04 19:56:51Z

If you're going to have dynamic data created, don't use an ID to grab them because it is not valid HTML to have two elements with the same ID. Use a class with the same name and it will work fine.

<div id='link_delete_holder' style='position:absolute;left:590px;top:10px'>
    <img class='link_delete' src='images/account_related/icons/link_delete.png'/>
</div>

Also, as Anoop Joshi points out you cannot use a direct $('#link_delete').hover(...); you need to use a delegate and using what I said from above add the delegate based on the class not the ID, and you should use mouseenter and mouseleave as that is essentially what .hover(func(), func()) is doing.

$('.link_delete').on({
    mouseenter: function () {
        $(this).attr('src', 'images/account_related/icons/link_delete_h.png');
    },
    mouseleave: function () {
        $(this).attr('src', 'images/account_related/icons/link_delete.png');
    }    
});

EDIT:

Added a working jsFiddle that has dynamically created images that will on hover change the image and then back when you're done hovering.

Charles380 · Accepted Answer · 2014-03-04 19:27:44Z

2

You should use delegates for dynamically created objects.

$(document).on("hover","#link_delete",function(){
  $(this).attr('src', 'images/account_related/icons/link_delete_h.png');
});

edited Mar 4, 2014 at 19:27

Charles380

1,2799 silver badges19 bronze badges

answered Mar 4, 2014 at 18:59

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

6 Comments

Jason OOO Over a year ago

I don't think this is the real problem. the issue is he uses id instead of class so that jQuery selector matches first element only, also, he dont mentioned any dynamic elements in client side.

Anoop Joshi P Over a year ago

@JasonOOO image has the id link_delete

Jason OOO Over a year ago

but you knew that ID should match one element and should be unique its not like a class see prove! jsfiddle.net/4hE86/5

Anoop Joshi P Over a year ago

@JasonOOO he want the hovering effect only on that image. Then whats the problem?

Jason OOO Over a year ago

is it only works on the first record (the first link_delete image that gets displayed), and seems like it doesn't apply to other images

|

Collectives™ on Stack Overflow

jQuery hover not working with dynamic elements

2 Answers 2

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related