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不会触发加载事件，为什么？点击事件运作良好。

Answer 1

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

Answer 2

对于某些浏览器（特别是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');
});

为什么jquery on（）不能处理图像加载事件

2 个答案: