通过append()添加Jquery img两次触发onload

Question

让我头疼的代码相当简单:

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

我的头脑里面有上面的代码,身体里面有一个id为'test'的div.现在我的问题是页面在加载图像时会产生两个警报,但是我希望它只生成一个,因为'onload'应该只被触发一次 - 当我手动添加图像而没有任何javascript时它发生的方式.
看看我制作的小提琴:http://jsfiddle.net/9985N/

非常感谢任何帮助/解释......

Answer 1

更新(因为有些人不相信我,哈哈)

因为.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创建了第一次调用事件node时的文档,onload然后将shifts其创建到再次调用它的位置.也许转变是错误的词,原谅我,因为词汇不是我的强项.但是,如果您按照代码看到它的创建及其移动,则不会再次使用append来移动它,因为节点已经创建,它只是从一个元素移动到另一个元素而没有onload的重载.正如我所说,不确定最好的术语,但是很容易跟上jQuery.js.

不相信我？刚刚测试了MSIE9,FF12和GoogleChrome20中的以下小提琴,有0个问题.

的jsfiddle

只是仅供参考,它并不是一个非常糟糕的做法,但我看到人们一直在jQuery中编写完整的HTML行,这种做法无法实现.这是一个图书馆,有许多书籍可以故意阅读.有时,完整的HTML系列可能看起来更容易,但它可能不会更快,因为它不会遵循为您完成的所有优秀布局工作.我们的想法是"少写,多做",这包括HTML.毕竟,如果你要编写整行的HTML,为什么要使用jQuery就可以使用jQuery了!？:P只是一个想法.