6

让我头疼的代码很简单：

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

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

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

4

2 回答 2

6

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

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

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

jsFiddle

仅供参考，这并不是一种可怕的做法，但我看到人们一直在用 jQuery 编写整行 HTML，这违背了目的。这是一个图书馆，有很多书可以故意阅读。有时，完整的 HTML 行可能看起来更容易，但它可能不会更快，因为它没有遵循为您完成的所有出色的布局工作。这个想法是“少写，多做”，这包括 HTML。毕竟，如果您要编写整行 HTML，那么当您可以只用 PHP 编写它时，为什么还要使用 jQuery！？:P 只是一个想法。

于 2012-05-30T12:38:21.530 回答
0

或这个：

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');  
});
于 2012-05-30T12:43:42.993 回答