6

私にとって頭痛の種となるコードはかなり単純です。

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

私の頭には上記のコードがあり、本文にはid'test'のdivがあります。私の問題は、画像が読み込まれたときにページが2つのアラートを生成することですが、「onload」は1回だけトリガーされる必要があるため、1つだけが生成されると予想しました。JavaScriptを使用せずに画像を手動で追加した場合の方法です。http://jsfiddle.net/9985N/
で作成したフィドルを参照してください。

ヘルプ/説明は大歓迎です...

4

2 に答える 2

6

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

.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作成されることがはっきりとわかります。おそらくシフトは間違った言葉です。語彙は私の強いスーツではないので、許してください。ただし、コードに従うと、その作成と移動が表示されますが、ノードがすでに作成されているため、再度追加を使用して移動する場合も同じではありません。ノードは、オンロードの再スパークなしで、ある要素から別の要素に移動するだけです。私が言ったように、最良の用語はわかりませんが、jQuery.jsをフォローするのは非常に簡単です。nodeonloadshifts

私を信じないの？MSIE9、FF12、およびGoogleChrome20で次のフィドルをテストしましたが、問題はありませんでした。

jsFiddle

参考までに、それは実際にはひどい習慣ではありませんが、人々は常にjQueryでHTMLの全行を記述しているのを見て、そのようなことは目的を打ち破ります。わざと読む本がたくさんある図書館です。HTMLの完全な行は簡単に見える場合もありますが、これまでに行われたすべての優れたレイアウト作業に従わないため、高速ではない場合があります。アイデアは「書く量を減らし、より多くのことをする」ことであり、これにはHTMLが含まれます。結局のところ、HTMLの全行を書くつもりなら、PHPだけでjQueryを使用できるのに、なぜjQueryを使用するのでしょうか。：Pただの考え。

于 2012-05-30T12:38:21.530 に答える
0

またはこれ：

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');  
});
于 2012-05-30T12:43:42.993 に答える