Click event on dynamicaly added images

Question

I'm generating images from a folder with this script:

$(document).ready(function() {
$.ajax({
    url: "gallery_images",
    success: function(data){
        $(data).find("a:contains(.jpg),a:contains(.gif),a:contains(.png)").each(function(){
            // will loop through
            var images = $(this).attr("href");

            $('<div class="g_image"></div>').html('<img class="g_img" src="gallery_images/'+images+'"/>').appendTo('#galerija');
        });
    }
});

});

The problem is that, then I'm trying to click the image, simple jQuery click event does not work.

$(".g_image img").click(function(){
alert("WORKING!");

});

@Zenith i stopped counting at 175 632 455, I'm tired now... – A. Wolff Aug 08 '13 at 13:34 — A. Wolff, Aug 08 '13 at 13:34

score 5 · Accepted Answer · answered Aug 08 '13 at 13:30

5

Use event delegation for this, you can take closest parent document instead document.body

$(document.body).on("click","#g_image img",function(){
    alert("WORKING!");
});

answered Aug 08 '13 at 13:30

Dhaval Marthak

17,246
6
46
68

score 2 · Answer 2 · answered Aug 08 '13 at 13:30

2

try using delegate.

$("body").on("click","#g_image img",function(){
 alert("WORKING!");

});

answered Aug 08 '13 at 13:30

user1

1,063
1
8
28

Click event on dynamicaly added images

2 Answers2