jQueryのIMGは（APPENDから追加）のonload二回

Question

をトリガ私にとって頭痛の種を生成したコードはかなり単純です：

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

私は私の頭の中で上記のコードとのidを持つdivの「テスト」を持っています体。今私の問題は、画像がロードされたときにページが2つの警告を生成することですが、「onload」が1回だけトリガされるように1つしか生成しないと予想しました.JavaScriptなしで手動で画像を追加すると起こります。
私が作っフィドルを参照してください：http://jsfiddle.net/9985N/

すべてのヘルプ/説明が大幅に高く評価されたが...

Answer 1

UPDATED（一部の人々は笑、私を信じていないので）

ので、 .appendが最初にノードを作成し、次にmそれを適切な位置に据える。最初に要素を追加し、その属性を次のように追加してみてください。

$(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ファイルを開くと、onloadイベントが最初に呼び出されたときにが文書にnodeを作成してから、shiftsが再度呼び出されるときの位置になることがはっきりとわかります。おそらくシフトは間違った言葉です。私はボキャブラリーが私の強い訴訟ではないので、私を許してください。しかし、コードをたどってその作成とその移動を見ると、ノードを既に作成しているので、再度移動するためにappendを使用しても同じことは言われません、onloadのresparkなしで要素間を移動するだけです。私が言ったように、最良の用語は不明ですが、jQuery.jsに従うのはとても簡単です。

私を信じられませんか？ MSIE9、FF12、& GoogleChrome20に次のfiddleをテストしただけで問題は発生しません。

jsFiddle

ちょうどFYI、それは本当に恐ろしいの練習ではありませんが、私は、人々はすべての時間と敗北のそのような目的のjQueryでHTMLの行全体を書き参照してください。それは目的のために読むために多くの本を持つ図書館です。 HTMLの完全なラインがより簡単に見えるかもしれませんが、それはあなたのためにされている素晴らしいレイアウトのすべての作業に従わないので、速くないかもしれません。このアイデアは、「少ないものを書く、より多くをやる」というもので、これにはHTMLが含まれています。結局のところ、HTMLの全ラインを書くつもりなら、なぜPHPだけでもjQueryを使うのはなぜですか？ ：Pちょうど考え。

Answer 2

またはこの：使用

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