Javascript 通过append（）添加的Jquery img会触发onload两次

让我头疼的代码非常简单：

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

$（函数（）{
$（“#测试”）。附加（“”）；
})

我脑子里有上面的代码，身体里有一个id为“test”的div。现在我的问题是，页面在加载图像时会产生两个警报，但我希望它只会产生一个警报，因为“onload”应该只触发一次——就像我在没有任何javascript的情况下手动添加图像时发生的那样。
看看我在那里做的小提琴：

非常感谢您的帮助/解释

更新（因为有些人不相信我，哈哈）

因为

.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
在文档上创建
节点
，这是首次调用
onload
事件时，然后
将它移动到再次调用它时的位置。可能是移位错误的单词，请原谅我，因为词汇不是我的强项。但是如果你遵循代码，你会看到它的创建和移动，但是再次使用append移动它并不是这样的，因为节点已经创建，它只是从一个元素移动到另一个元素，而不需要重新加载。正如我所说，不确定最佳术语，但它是很容易跟随你的脚步

不相信我？只是在MSIE9、FF12和Google Chrome20中测试了以下内容，没有任何问题


仅供参考，这并不是一个可怕的做法，但我看到人们一直在用jQuery编写整行HTML，这有点违背了目的。这是一个图书馆，有很多书可以阅读。有时一行完整的HTML可能看起来更容易，但可能不会更快，因为它没有遵循所有伟大的布局工作e给你。想法是“写得少，做得多”，这包括HTML。毕竟，如果你要写整行HTML，为什么要使用jQuery呢？如果你可以直接用PHP编程！？：P只是一个想法。
或者：
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');  
});

var img=$（''）.on（'load'，function（）{
$（'#test'）。追加（img）；
警报（“已加载”）；
});
使用
.html（…）
方法可以解决这个问题，但我不知道为什么会发生这种情况。这可能不是主题，但你永远不应该在图像上附加
加载
。@Jashwant:你能解释一下原因吗？因为我看不到w3c的人在上面提到过任何事情：首先看到这个，然后W3Shool可能不会提供好的学习内容，但它对元素参考很有好处，关于e注意事项提到@jquery api site-似乎合理，但这并不意味着我们应该“永远”使用它（据我所知）…我在这里需要的唯一功能是跨浏览器兼容性，对于大多数现代浏览器来说似乎很好（例如：我不希望在缓存图像时调用该函数..）-1您的回答避免了问题。实际上，警报显示两次，即使没有将对象附加到任何位置……只需将其包装在
$（‘如果它是唯一的元素，为什么要附加它？@tenneff:很好的一点-不幸的是，它增加了混淆-这是一个jquery错误吗？顺便说一句，移动图像不会再次触发‘onload’，是吗？哇，更新确实澄清了一些东西，但您是否愿意解释一下我们编写时会发生什么$（'与加载图像时代码附加的问题略有不同，对吗？（我说的是相反的问题）