小编典典

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

ajax

我的页面是通过ajax响应动态生成的。

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

.load().bind('load')在第一次加载页面时正常工作。但是肯定不能在下一个响应中工作。

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

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

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

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


阅读 267

收藏
2020-07-26

共1个答案

小编典典

onload事件不会冒泡,因此您无法委托它。但是,如果您不需要支持IE8 <,则可以捕获事件,它适用于任何动态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
);

-演示-

2020-07-26