Levent Çorapsız Levent Çorapsız - 6 months ago 19
jQuery Question

JQuery .on() event handler usage for dynamically loaded image

My pages are generating dynamically by ajax response.

Each response has an

img
element with specified id. I need them to fade in when loaded.

.load()
and
.bind('load')
works fine when page is loaded for first time. But not working in next response for sure.

$('#my_img').load(function(){
$(this).hide().fadeIn('slow');
});


So i need to use
.on()
event handler. But doesn't work.

$('body').on('load','#my_img',function(){
$(this).hide().fadeIn('slow');
});


Note: This is not a cache issue. Img src also has a random query string.

Answer

onload event doesn't bubble, so you cannot delegate it. But, if you don't need to support IE8<, you can capture event instead which will work for any dynamic img:

document.body.addEventListener(
    'load',
    function(event){
        var elm = event.target;
        if( elm.id === 'my_img'){ // or any other filtering condition
            // do some stuff
        }
    },
    true // Capture event
);

-DEMO-