Jquery img aggiunto attraverso append() innesca onload due volte

Question

Il codice che produce il mal di testa per me è piuttosto semplice:

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

ho il codice di cui sopra nella mia testa e un div con 'test' id nel corpo. Ora il mio problema è che la pagina genera due avvisi quando l'immagine è caricata, ma mi aspettavo che ne producesse solo uno in quanto il "onload" dovrebbe essere attivato una sola volta - Il modo in cui accade quando aggiungo l'immagine manualmente senza javascript.
Vedere il violino che ho fatto a: http://jsfiddle.net/9985N/

Qualsiasi aiuto/spiegazione è molto apprezzato ...

Answer 1

AGGIORNATO (perché alcune persone non mi credono, lol)

Perché .append crea prima il nodo e poi m lo porta alla sua posizione appropriata. Prova aggiungendo il primo elemento poi aggiungendo i suoi attributi come segue:

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

La mia risposta non "evitare" il problema, risponde molto direttamente. Se apri il file jQuery.js in formato non compresso, puoi vedere chiaramente che lo crea il documento node sul documento, quando viene chiamato per la prima volta l'evento onload e poi shifts in posizione che viene richiamato. Forse il cambiamento è la parola sbagliata, perdonami come il vocabolario non è il mio forte seme. Tuttavia se segui il codice vedi la sua creazione e il suo movimento, tuttavia non si dice lo stesso per l'uso di append ancora per spostarlo, poiché il nodo è già stato creato si sposta semplicemente da un elemento all'altro senza alcun responso di onload. Come ho detto, non sono sicuro della terminologia migliore, ma è molto facile seguire lo jQuery.js.

Non credermi? Appena testato il seguente fiddle in MSIE9, FF12, & GoogleChrome20 con 0 problemi.

jsFiddle

appena cronaca, non è in realtà una pratica orribile, ma vedo le persone scrivono intere linee di codice HTML in jQuery tutto il tempo e che tipo di sconfitte lo scopo. È una biblioteca con molti libri da leggere apposta. A volte una linea completa di HTML può sembrare più semplice, ma potrebbe non essere più veloce in quanto non segue tutto il lavoro di impaginazione che è stato fatto per te. L'idea è "Scrivi meno, fai di più" e questo include HTML. Dopotutto, se avessi scritto tutta la riga dell'HTML, perché usare jQuery quando potevi semplicemente inserirlo in PHP ?! : P Solo un pensiero.

Answer 2

o questo:

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