script function does not work on prepended data

Question

I have a javascript function to check for hover on image and display a delete button. It's working on existing thumbnails when the page first loaded, but when I upload an image and prepend the data with ajax to existing thumbnail gallery the hover function is not working to the newly added thumbnails.

Here's the script which is on the document ready

$(".del_photo").hide(); // Initially hide all buttons

$('.photo-item').hover(function(){
    $(this).find('.del_photo').fadeIn(1000);
}, function(){
    $(this).find('.del_photo').fadeOut(1000);
});

thanks

According to the link gave by Olav, here's my new code.

$(document).on({
        mouseenter: function () {
            $(this).find('.del_photo').fadeIn(1000);
        },
        mouseleave: function () {
            $(this).find('.del_photo').fadeOut(1000);
        }
    }, ".photo-item"); //pass the element as an argument to .on

http://stackoverflow.com/questions/9827095/is-it-possible-to-use-jquery-on-and-hover — Olav Kokovkin, Jun 30 '14 at 08:34
@fyeth You need to attach the event on dynamically generate code. — Amit, Jun 30 '14 at 08:35

score 0 · Answer 1 · answered Jun 30 '14 at 08:38

0

actually we need this function if we want to use function on already present class or id..here situation is different.class is adding dynamically so,use following function

$(document).on('hover','.photo-item',(function(){

answered Jun 30 '14 at 08:38

Mr7-itsurdeveloper

1,631
2
17
24

score -1 · Answer 2 · answered Jun 30 '14 at 08:37

-1

Try 'on', something like:

$('.photo-item').on("hover", function(){
// ...
})

answered Jun 30 '14 at 08:37

JPK

491
5
27

script function does not work on prepended data

2 Answers2