爲什麼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);