Question

我的网页是由ajax响应动态生成的。

每个响应都有一个具有指定ID的img元素。我需要它们在装载时淡入。

第一次加载页面时，

.load()和.bind('load')正常工作。但是肯定没有在下一个回复中工作。

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

所以我需要使用.on()事件处理程序。但是不起作用。

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

注意：这不是缓存问题。 Img src也有一个随机查询字符串。

Answer 1

onload事件没有冒泡，因此您无法委托它。但是，如果您不需要支持IE8＆lt;，您可以捕获事件，而不是任何动态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-

Answer 2

您可以尝试使用Jquery的ready事件而不是on.load来在元素准备好时运行一些代码。

这是我用来演示它的小提琴：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);
    });
});

动态加载图像的JQuery .on（）事件处理程序用法

2 个答案:

-DEMO-