通过 append() 添加的 Jquery img 触发两次 onload [英] Jquery img added through append() triggers onload twice

问题描述

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

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

我脑子里有上面的代码，主体中有一个 ID 为test"的 div.现在我的问题是页面在加载图像时会产生两个警报，但我希望它只产生一个警报，因为onload"应该只触发一次 - 当我在没有任何 javascript 的情况下手动添加图像时发生的方式..
请参阅我在以下位置制作的小提琴:.

不相信我?刚刚在 MSIE9、FF12、& 中测试了以下 fiddleGoogleChrome20 有 0 个问题.

jsFiddle

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

The code that produces the headache for me is rather simple:

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

I have the above code in my head and a div with id 'test' in the body. Now my problem is that the page produces two alerts when the image is loaded, but I expected it to produce only one as the 'onload' should be triggered only once- The way it happens when I add the image manually without any javascript..
See the fiddle I made at: http://jsfiddle.net/9985N/

Any help/explanation is greatly appreciated...

解决方案

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

Because .append creates the node first and then moves it to its appropriate position. Try appending the element first then adding its attributes as follow:

$(function() {
    $("#test").append(
        $("<img />").attr({
            src: "http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Bachalpseeflowers.jpg/300px-Bachalpseeflowers.jpg",
            onload: "alert(\'hi\')"
        })
    );
});

My answer does not "avoid" the problem, it answers it very directly. If you open the jQuery.js file in uncompressed format you can clearly see that .append creates the node on the document which is when the onload event is first called and then shifts it into position which is when it gets called again. Perhaps shift is the wrong word, forgive me as vocabulary is not my strong suit. However if you follow the code you see its creation and its movement, however the same is not said for using append again to move it, as the node is already created it simply moves from one element to another with no respark of onload. As I said, not sure best terminology, but it's very easy to follow along on the jQuery.js.

Don't believe me? Just tested the following fiddle in MSIE9, FF12, & GoogleChrome20 with 0 problems.

jsFiddle

just FYI, it's not really a horrible practice, but I see people write whole lines of HTML in jQuery all the time and that kind of defeats the purpose. It's a library with many books to read on purpose. Sometimes a complete line of HTML might seem easier, but it may not be faster as it doesn't follow all the great layout work that has been done for you. The idea is to "Write less, do more" and this includes HTML. After all, if you were gonna write the whole line of HTML, why use jQuery at all when you could just PHP it in!? :P Just a thought.

这篇关于通过 append() 添加的 Jquery img 触发两次 onload的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！