javascript - 通过append()添加的jquery img会触发两次onload

Question

让我头疼的代码很简单:

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

我脑子里有上面的代码， body 里有一个 id 为“test”的 div。现在我的问题是页面在加载图像时会产生两个警报，但我希望它只产生一个，因为“onload”应该只触发一次 - 当我在没有任何 javascript 的情况下手动添加图像时发生的方式。
请参阅我制作的 fiddle :http://jsfiddle.net/9985N/

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

Answer 1

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

因为.append先创建节点，然后将其移动到合适的位置。尝试先 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 时在文档上创建了 node事件首先被调用，然后将其移动到再次调用的位置。也许转移是错误的词，请原谅我，因为词汇不是我的强项。但是，如果您按照代码进行操作，您会看到它的创建和移动，但是再次使用 append 来移动它并不是这样，因为节点已经创建，它只是从一个元素移动到另一个元素而不会重新加载 onload。正如我所说，不确定最好的术语，但很容易理解 jQuery.js .

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

jsFiddle

仅供引用，这并不是一个可怕的做法，但我看到人们一直在 jQuery 中编写整行 HTML，这有点违背了目的。这是一个有很多书的图书馆。有时，完整的 HTML 行可能看起来更简单，但它可能不会更快，因为它没有遵循为您完成的所有出色布局工作。这个想法是“少写，多做”，这包括 HTML。毕竟，如果你要编写整行 HTML，为什么要使用 jQuery，因为你可以将它放入 PHP 中!？ :P 只是一个想法。