Geek asks and answers

JQuery img added via addend () triggers twice

The headache-creating code for me is pretty simple:

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

I have the code above in my head and a div with id 'test' in the body. Now my problem is that the page displays two warnings when loading the image, but I expected it to only generate one, since "onload" should only run once. How does this happen when I add an image manually without javascript.
See the script I made at: http://jsfiddle.net/9985N/

Any help / explanation is much appreciated ...

+5
source share
2 answers

UPDATED (Because some people don't believe me, lol)

.append node, . , :

$(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 , node , onload. , , jQuery.js.

? fiddle MSIE9, FF12 GoogleChrome20 0 .

jsFiddle

FYI, , , HTML jQuery , . . HTML , , , . , " , ", HTML. , HTML, jQuery , PHP??: P .

+6

:

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

More articles:


All Articles