jquery clone在哪里呈现它的内容？

Question

未附加到任何内容的jquery clone对象在哪里呈现它的内容？它不在页面DOM

中

说我有这个标记：

<div class="output">
    <span class="label">hello world</span>
</div>

并运行此脚本：

var cloned = $('.output').clone();
cloned.find('.label').html('<img src="x" onerror="alert(1);"/>');

尽管克隆的jquery对象没有附加到任何地方，为什么警报会运行？

图像没有在任何地方渲染，为什么图像加载和错误发射？

http://jsbin.com/xulilewogi/1/edit?html,js,output

Answer 1

  

警报为什么会运行？

找不到

img src "x"

修改，更新

  

我问为什么克隆元素在没有时加载图像   在页面DOM上的任何位置呈现

为什么警报会运行   尽管克隆的jquery对象没有附加到任何地方？

与<img>元素无关。例如，尝试

var img = document.createElement("img"); 
img.onerror = function() {alert(1)};
img.src = "x";

jsfiddle https://jsfiddle.net/eue0y6ny/

请注意，图片未附加到DOM，但请求src的资源集，并调用img.onerror。

同样，在.html('<img src="x" onerror="alert(1);"/>')处，会创建<img>元素并附加onerror事件属性。请求<img> src，在找不到资源时调用onerror。

请参阅<{p}}上的The img element

  

当用户代理要更新img元素的图像数据时，它   必须执行以下步骤：

     

  
1. ⌛如果选择的源为null，则将元素设置为损坏状态，将任务排队以在error元素上触发名为img的简单事件，并中止这些步骤。