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

我的页面是通过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还有一个随机查询字符串。

onload

事件不会冒泡，因此您无法委派它。但是，如果不需要支持IE8，可以尝试使用Jquery的ready事件而不是on.load在元素准备就绪时运行一些代码

下面是我制作的一把小提琴，用以演示它的实际操作：

$（文档）.ready（函数（）{
$（'div'）。单击（函数（）{
var newDiv=$（''）；
$（newDiv）.ready（函数（）{
$（newDiv）.fadeIn（“慢”）；
});
$（'body'）.append（newDiv）；
});
});

加载事件不会冒泡，因此无法委派，因此无法执行您尝试执行的操作！将处理程序绑定到

.load（）

方法句柄..中如何？您仍然可以将事件捕获到正文级别。您可以在将ajax响应添加到页面之前直接将处理程序绑定到图像。如果您添加了如何将响应添加到页面的代码，我们可能可以帮助您解决这一问题。只需将AJAX调用中的on方法重新绑定到图像或任何您需要的元素即可。谢谢。这个可以用。我不需要支持古代浏览器及其用户：）

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
);

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