Jquery img, добавленный через append(), дважды запускает onload

Код, который вызывает у меня головную боль, довольно прост:

$(function(){ 
$("#test").append('<img onload="alert(\'hi\')" src="Image.jpg"/>');
})

У меня есть код выше в моей голове и div с идентификатором 'test' в теле. Теперь моя проблема состоит в том, что страница выдает два предупреждения, когда изображение загружается, но я ожидал, что оно выдаст только одно, так как "загрузка" должна запускаться только один раз - как это происходит, когда я добавляю изображение вручную без какого-либо javascript..
Смотрите скрипку, которую я сделал по адресу: http://jsfiddle.net/9985N/

Любая помощь / объяснение очень ценится...

Источник

2 ответа

Решение

ОБНОВЛЕНО (Потому что некоторые люди не верят мне, смеется)

Так как .append сначала создает узел, а затем перемещает его в соответствующую позицию. Попробуйте сначала добавить элемент, а затем добавить его атрибуты следующим образом:

$(function() {
    $("#test").append(
        $("<img />").attr({
            src: "http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Bachalpseeflowers.jpg/300px-Bachalpseeflowers.jpg",
            onload: "alert(\'hi\')"
        })
    );
});

Мой ответ не "избегает" проблемы, он отвечает на нее очень прямо. Если вы откроете файл jQuery.js в несжатом формате, вы можете ясно увидеть, что .append создает node на документе, который, когда onload событие сначала вызывается, а затем shifts это в положение, когда его снова вызывают. Возможно, слово "сдвиг" - неправильное слово, прости меня, так как словарный запас - не моя сильная сторона. Однако, если вы следуете коду, вы видите его создание и его перемещение, однако это не относится к использованию append снова для его перемещения, так как узел уже создан, он просто перемещается от одного элемента к другому без повторного появления нагрузки. Как я уже сказал, не уверен в лучшей терминологии, но за ней очень легко следовать в jQuery.js.

Не веришь мне? Только что протестировал следующую скрипку в MSIE9, FF12 и GoogleChrome20 с 0 проблемами.

jsFiddle

просто к вашему сведению, это не совсем ужасная практика, но я вижу, что люди постоянно пишут целые строки HTML в jQuery, и это побеждает цель. Это библиотека с множеством книг для чтения нарочно. Иногда полная строка HTML может показаться более простой, но она не может быть быстрее, поскольку она не соответствует всей великолепной работе с макетом, которая была сделана для вас. Идея состоит в том, чтобы "писать меньше, делать больше", и это включает в себя HTML. В конце концов, если вы собираетесь написать целую строку HTML, зачем вообще использовать jQuery, если вы можете просто написать PHP!?:P Просто мысль.

Источник

Или это:

var img = $('<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Bachalpseeflowers.jpg/300px-Bachalpseeflowers.jpg"/>').on('load', function(){
    $('#test').append(img);
    alert('loaded');  
});
Источник
Другие вопросы по тегам