CODEWITHSUNDEEP
jquery
MariaZ
MariaZ

Reputation: 1747

jquery - loading an image then trigger an event with that image

I am doing some code to insert images to a div, and after loading them, the user might be able to trigger an event by clicking on the images, this doesnt work for some odd reason, here is the code:

 $(function(){
    getPictures('pictures.xml');

    function getPictures(picturesXML){
        $.get(picturesXML, function(data){

            var pictures = data;    
            var countElements = $(pictures).find('pic').length;             

            $(pictures).find('pic').each( function( i ){

                var img = $('<img src="images/' + $(this).attr('src') + '" style="top : ' + $(this).attr('top') + 'px; left: ' + $(this).attr('left') + 'px" width=" '+ $(this).attr('w')  +'"/>');

                    img.load( function(){   
                        $('.space').append( $(this) );
                        $(this, 'space').delay(100*i).fadeIn('fast');   
                    });                                 

            })      

            $('.space img').mouseenter(function(){
                alert('hello');

            })

        })
    }
})

Is there anybody here who can help me figuring out this. Thanks!

Upvotes: 0

Views: 45

Answers (1)

Lukas Bijaminas
Lukas Bijaminas

Reputation: 176

Regular jQuery event functions tend to not support event bubbling. Try using $.on method. In this case, replace:

$('.space img').mouseenter(function(){
            alert('hello');

        })

with:

$(document).on('mouseenter','.space img', function(){
            alert('hello');

        });

Also, notice the missing semicolon. This should do the trick.

Upvotes: 1

Related Questions