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, Mar 04 '14 at 19:00

score 2 · Answer 1 · edited Mar 04 '14 at 19:27

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 04 '14 at 19:27

Charles380

1,269
8
19

answered Mar 04 '14 at 18:59

Anoop Joshi P

25,373
8
32
53

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. – Jason OOO Mar 04 '14 at 19:07
@JasonOOO image has the id link_delete – Anoop Joshi P Mar 04 '14 at 19:09
but you knew that ID should match one element and should be unique its not like a class see prove! http://jsfiddle.net/4hE86/5/ – Jason OOO Mar 04 '14 at 19:09
@JasonOOO he want the hovering effect only on that image. Then whats the problem? – Anoop Joshi P Mar 04 '14 at 19:11
`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` – Jason OOO Mar 04 '14 at 19:11
@JasonOOO OP didnt mension about multiple images – Anoop Joshi P Mar 04 '14 at 19:13

Charles380 · Accepted Answer · 2014-03-04T19:56:51.507

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.

jQuery hover not working with dynamic elements

2 Answers2

Linked