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

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

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

У меня есть код выше в моей голове и div с id 'test' apos; в теле. Теперь моя проблема заключается в том, что страница выдает два оповещения, когда изображение загружается, но я ожидал, что оно выдаст только одно в качестве «onload». должен быть запущен только один раз - так, как это происходит, когда я добавляю изображение вручную без JavaScript.
Посмотрите на скрипку, которую я сделал на:http://jsfiddle.net/9985N/

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

 Jashwant30 мая 2012 г., 15:26
Сначала посмотри на это W3fools а потомjQuery load
 Erric30 мая 2012 г., 15:15
@ Jashwant: Не могли бы вы объяснить, почему? Потому что я не вижу, что парни w3c упоминают об этом по адресу: W3schools.com / jsref / event_img_onload.asp
 Teneff30 мая 2012 г., 14:26
С помощью.html(...) метод это исправит, но я понятия не имею, почему это происходит
 Jashwant30 мая 2012 г., 14:53
Может быть оффтоп, но вы никогда не должны прикреплятьload на изображениях.
 Erric30 мая 2012 г., 16:36
w3shools может не обеспечивать хороших вещей для обучения, но полезен для ссылок на элементы, о упомянутых предостережениях. @ jquery api site - кажется разумным, но это не значит, что мы не должны «никогда» его использовать (насколько я понимаю) ... Единственная особенность, которая мне здесь нужна, была совместимость между браузерами, и она подходит для большинства современных браузеров (например: я не хочу, чтобы функция вызывалась, если изображение кэшируется ..)

Ответы на вопрос(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 Просто мысль.

 Erric30 мая 2012 г., 17:20
Вау, обновление действительно проясняет ситуацию, но все же ты не мог бы объяснить, что происходит, когда мы пишем $ ('<img ...'), как сказал Тенефф?
 Teneff30 мая 2012 г., 14:51
-1 Ваш ответ позволяет избежать проблемы. На самом деле предупреждение отображается дважды, даже не добавляя объект в любом месте ... просто оборачивая его внутри$('<img...'). Проверь эт
 Jashwant30 мая 2012 г., 14:51
Почему быappend сдвинуть его, если это единственный элемент?
 Erric30 мая 2012 г., 15:17
@ tenneff: замечательно - к сожалению, это еще больше увеличивает путаницу - это ошибка jquery?
 Erric30 мая 2012 г., 15:24
btw, перемещение изображения не вызовет повторной загрузки, не так ли?

или это

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');  
});
 Erric30 мая 2012 г., 15:22
Немного отличается от проблемы - ваш код добавляется при загрузке изображения, верно? (Я говорил об обратном)

Ваш ответ на вопрос