为什么jquery on（）对图像加载事件不起作用

Question

$('body').on('click', 'img', function() { 
    $('<img class="halfsize" src="imgs/logo.png?' + Math.random() + '" alt="" />').appendTo('header'); 
}); 
$('img').on('load', function (evt) { 
    console.log(this, evt); 
}); 

此代码在页面第一次加载时工作正常。但是，当点击img时，新添加到标题的img不会触发加载事件，为什么？ Click事件工作正常。

Answer 1

对于某些浏览器（特别是IE），您必须在分配.src属性之前附加onload处理程序。这是因为如果映像位于映像缓存中，则在分配.src属性时，某些浏览器会立即加载映像。因此，如果您之后附加了load处理程序，则事件已经发生，您可能完全错过了该事件。

load事件不会传播，因此您无法使用委派的事件处理。

在你的情况，我建议为安全，正确的行为，该代码在第一个附加负载处理所有的浏览器：

$('body').on('click', 'img', function() { 
    $('<img class="halfsize" alt="" />') 
     .on('load', function (evt) { 
      console.log(this, evt); 
     }) 
     .attr("src", "imgs/logo.png?" + Math.random()) 
     .appendTo('header'); 
}); 

Answer 2

click的工作原理是因为您使用了.on()的委派形式。

你应该做同样的图像..

$('header').on('load','img', function(evt){ 
    console.log(this, evt); 
}); 

---

更新似乎图像加载事件不冒泡的DOM（所以你无法通过委派事件处理处理它们）..

所以你将不得不手动添加你的处理程序到动态添加的图像..

function loadHandler(evt){ 
    console.log(this, evt); 
} 
$('body').on('click', 'img',function(){ 
    $('<img/>', { 
     'class':'halfsize', 
     load: loadHandler, 
     alt:'', 
     src: 'imgs/logo.png?'+ Math.random() 
    }).appendTo('header'); 
}); 

$('img').on('load', loadHandler);