$('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 работает хорошо.
Для некоторых браузеров (в частности, IE) вы ДОЛЖНЫ присоединить обработчик onload перед назначением атрибута .src
. Это связано с тем, что некоторые браузеры сразу загружают изображение, когда вы назначаете атрибут .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');
});
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);
onload
обработчик ПЕРЕД.src
значение устанавливается или вы можете пропуститьonload
событие целиком.