JQuery img hinzugefügt durch append() löst onload zweimal

Question

Der Code, der die Kopfschmerzen für mich produziert ziemlich einfach:

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

ich den obigen Code in meinem Kopf haben und ein div mit id ‚test‘ in der Karosserie. Jetzt ist mein Problem, dass die Seite zwei Warnungen erzeugt, wenn das Bild geladen wird, aber ich erwartete, dass es nur eine erzeugt, da die 'onload' nur einmal ausgelöst werden sollte. Die Art, wie es passiert, wenn ich das Bild manuell ohne Javascript hinzufüge.
die Geige Siehe ich gemacht: http://jsfiddle.net/9985N/

Jede Hilfe/Erklärung ...

Answer 1

AKTUALISIERT wird sehr geschätzt (Weil einige Leute glauben mir nicht, lol)

Weil .append erstellt den Knoten zuerst und dann m oves es zu seiner passenden Position. Versuchen Sie das Element anhängt zuerst, dann das Hinzufügen seiner Attribute wie folgt:

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

Meine Antwort nicht „vermeiden“ das Problem, es es beantwortet sehr direkt. Wenn Sie die jQuery.js-Datei im unkomprimierten Format öffnen, können Sie deutlich sehen, dass .append das node auf dem Dokument erstellt, das ist, wenn das Ereignis onload zuerst aufgerufen wird und dann shifts es in Position, die ist, wenn es erneut aufgerufen wird. Vielleicht ist Verschiebung das falsche Wort, verzeih mir, weil Vokabular nicht meine Stärke ist. Wenn Sie jedoch dem Code folgen, sehen Sie seine Erstellung und seine Bewegung, jedoch wird das Gleiche nicht gesagt, um append erneut zu verwenden, um es zu verschieben, da der Knoten bereits erstellt wurde, bewegt er sich einfach von einem Element zu einem anderen ohne Onload. Wie ich schon sagte, nicht sicher, beste Terminologie, aber es ist sehr einfach zu folgen auf der,.

Glauben Sie mir nicht? Habe gerade folgendes fiddle in MSIE9, FF12, & GoogleChrome20 mit 0 Problemen getestet.

jsFiddle

nur FYI, ist es nicht wirklich eine schreckliche Praxis, aber ich sehe Leute ganze Zeilen HTML in jQuery die ganze Zeit und diese Art von Niederlagen der Zweck schreiben. Es ist eine Bibliothek mit vielen Büchern, die man absichtlich lesen kann. Manchmal scheint eine komplette HTML-Zeile einfacher zu sein, aber sie ist vielleicht nicht schneller, da sie nicht all den großartigen Layout-Arbeiten folgt, die für Sie erledigt wurden. Die Idee ist, "Weniger schreiben, mehr tun" und dazu gehört auch HTML. Wenn Sie die ganze HTML-Zeile schreiben würden, warum sollten Sie überhaupt jQuery verwenden, wenn Sie PHP einfach in PHP einfügen können? : P Nur ein Gedanke.

Answer 2

oder dies:

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