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

Where does jquery clone render it's content?

未附加到任何内容的 jquery 克隆对象在哪里呈现其内容?它不在页面 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

Why does alert run?

img src "x" 未找到


编辑、更新

I was asking why cloned element is loading image when it is not rendered anywhere on the page DOM

Why does the alert run despite cloned jquery object not being appended anywhere?

这与 <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 未找到资源时被调用。


The img element

When the user agent is to update the image data of an img element, it must run the following steps:

  1. ⌛ If selected source is null, then set the element to the broken state, queue a task to fire a simple event named error at the img element, and abort these steps.