通过 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 它定位到它的位置再次被调用。也许 shift 是错误的词，请原谅我，因为词汇不是我的强项。但是，如果您遵循代码，您会看到它的创建和移动，但是对于再次使用 append 来移动它并没有说同样的话，因为节点已经创建，它只是从一个元素移动到另一个元素而没有重新加载。正如我所说，不确定最好的术语，但在jQuery.js 上很容易理解。

不相信我？刚刚在 MSIE9、FF12 和 GoogleChrome20 中测试了以下fiddle，出现了 0 个问题。

jsFiddle

仅供参考，这并不是一种可怕的做法，但我看到人们一直在用 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');  
});