почему jquery on () не работает с событием загрузки изображения

Question

почему jquery on () не работает с событием загрузки изображения

0

$('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 работает хорошо.

Rivsen 22 дек. 2013, в 03:13

Источник

Теги:

jquery

2 ответа

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

Gabriele Petrioli 22 дек. 2013, в 00:02

0

Да, согласно документации функции «on» ( api.jquery.com/on ), события «load», «scroll» и «error» не всплывают и поэтому не могут быть делегированы.
akhikhl 22 дек. 2013, в 02:31
0

Ваша вторая версия не будет работать надежно в некоторых версиях IE , потому что вы должны назначить onload обработчик ПЕРЕД .src значение устанавливается или вы можете пропустить onload событие целиком.
jfriend00 22 дек. 2013, в 02:56
0

@ jfriend00, но на моей второй версии я назначаю нагрузку перед Src ..
Gabriele Petrioli 22 дек. 2013, в 10:31
1

Ваш код точно не назначает src после load . Когда jQuery перебирает свойства объекта, который вы передаете, чтобы применить их к объекту, он просто использует конструкцию for prop in obj которая не гарантирует какой-либо порядок свойств.
jfriend00 22 дек. 2013, в 10:48
0

Если вы измените img src вместо заголовка appendTo, кажется, что это вызовет много вызовов события в геометрической прогрессии. Каждый клик увеличивает количество звонков на событие «нагрузка»
Albert Català 27 янв. 2016, в 16:35

Показать ещё 3 комментария

Ещё вопросы

Да, согласно документации функции «on» ( api.jquery.com/on ), события «load», «scroll» и «error» не всплывают и поэтому не могут быть делегированы.
Ваша вторая версия не будет работать надежно в некоторых версиях IE , потому что вы должны назначить onload обработчик ПЕРЕД .src значение устанавливается или вы можете пропустить onload событие целиком.
@ jfriend00, но на моей второй версии я назначаю нагрузку перед Src ..
Ваш код точно не назначает src после load . Когда jQuery перебирает свойства объекта, который вы передаете, чтобы применить их к объекту, он просто использует конструкцию for prop in obj которая не гарантирует какой-либо порядок свойств.
Если вы измените img src вместо заголовка appendTo, кажется, что это вызовет много вызовов события в геометрической прогрессии. Каждый клик увеличивает количество звонков на событие «нагрузка»

jfriend00 · Accepted Answer · 2013-12-22T00-51-00.000Z

Для некоторых браузеров (в частности, 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');
});