CODEWITHSUNDEEP
jqueryhtmlajax
Levent Çorapsız
Levent Çorapsız

Reputation: 163

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.

Upvotes: 5

Views: 912

Answers (2)

yosefrow
yosefrow

Reputation: 2268

You could try using Jquery's ready event instead of on.load to run some code when the element is ready.

Here's a fiddle I made to demonstrate it in action: https://jsfiddle.net/yosefh/66g0xjre/1/

$(document).ready(function() {
  $('div').click(function() {
    var newDiv = $('<div></div>');
      $(newDiv).ready(function() {
        $(newDiv).fadeIn("slow");
      });
      $('body').append(newDiv);
    });
});

Upvotes: -1

A. Wolff
A. Wolff

Reputation: 74420

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-

Upvotes: 4

Related Questions