jQuery的IMG通过追加（）添加onload事件触发两次 [英] Jquery img added through append() triggers onload twice

问题描述

在code产生头痛对我来说是非常简单的：

  $（函数（）{
$（＃测试）追加（'＆LT; IMG的onload =警报（\\'喜\\'）SRC =image.jpg文件/＆GT;'）;
}）
 

我在我的脑袋上面code和在体内ID测试的div。现在我的问题是，页面产生两个警报在加载图像时，但我希望它只有一个生产的'onload事件'应该只once-当我手动添加图像而没有任何的JavaScript它发生的方式被触发..结果
见我在做的小提琴： http://jsfiddle.net/9985N/

任何帮助/解释是大大AP preciated ...

解决方案

  

更新时（因为有些人不相信我，大声笑）

由于 .append 创建了第一个节点，然后将其移动到其适当的位置。第一次尝试追加元素，然后添加它的属性如下：

  $（函数（）{
    $（＃测试）。追加（
        $（＆下; IMG /＆gt;中）。ATTR（{
            SRC： \"http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Bachalpseeflowers.jpg/300px-Bachalpseeflowers.jpg\",
            onload事件：警报（\\'喜\\'）
        }）
    ）;
}）;
 

我的回答并没有忌的问题，很直接地回答了。如果你打开​​uncom pressed格式的jquery.js文件，你可以清楚地看到， .append 创建节点上，这是当第一次叫的onload 事件，然后班它变成是当它到达位置的文件再次调用。或许转变是错词，请原谅我的词汇量不是我的强项。但是，如果你按照code你看到它的产生和它的运动，但是同样不说，再次使用追加移动它，作为节点已创建它只是从一个元素移动到另一个没有respark的onload 。正如我所说的，不知道最好的术语，但它很容易沿上跟随的jquery.js 。

不相信我？刚刚测试了以下小提琴在MSIE9，FF12，和放大器; GoogleChrome20 0的问题。

的jsfiddle 的

仅供参考，它不是一个真正的可怕的做法，但我看到人们写HTML的整行jQuery中所有的时间和那种失败的目的。这是许多书籍的图书馆，以故意阅读。有时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.

这篇关于jQuery的IMG通过追加（）添加onload事件触发两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！