Question

我正在使用jQuery 1.9.0，我的HTML是：

<div id='div1'>    
</div>
<div id='div2'>
</div>

我的js：

var input = $("<input type='text'>");
$('#div1').html(input);
$('#div2').html(input);

我对这段代码的理解是

input是一个jQuery对象，我可以单独设置div1和div2，就像我可以将一个变量的值分配给编程语言中的许多其他变量一样。

基于这种理解，我期待的是：

<div id='div1'>
    <input type="text">
</div>
<div id='div2'>
    <input type="text">
</div>

但我明白了：

<div id='div1'>
</div>
<div id='div2'>
    <input type="text">
</div>

如果我只是致电$('#div1').html(input);，div1会有input元素。调用div1后，为什么input的{{1}}元素会消失？

我知道如何绕过这个问题，但我很想知道这种行为的原因。

提前感谢！

更新

我真诚地感谢所有真正回答这个问题的人，并且我已经对每个答案投了赞成票。我现在对这个问题有了一个线索，但我仍然想知道为什么不同的节点（$('#div2').html(input);和div1）不能引用同一个对象。在div2语言中，不同的变量可以引用相同的内存地址。这两个C之间有什么区别？

Answer 1

克隆它，解决引用问题（在下面添加更多详细信息）：）

var input = $("<input type='text'>");
$('#div1').html(input.clone());
$('#div2').html(input.clone());

发生这种情况的原因是因为input是一个jQuery对象。把它想象成一个参考。第一次使用输入时，#div1会消耗它，但是引用仍然在内存中，当您将其添加到#div2时，它会重新生成它。

Answer 2

试试这个。 input可能只属于DOM中的特定节点.Same节点不能同时将div1和div2作为父节点。而是创建input的副本以将其附加到其他节点节点

var input = $("<input type='text'>");

$(input).clone().appendTo('#div1');
$(input).clone().appendTo('#div2');

Answer 3

最重要的是，当您将元素附加到页面上的某个位置时，DOM不会自动克隆您的元素。这不是特定于jQuery的。

由于input不断引用相同的元素，稍后将input附加到另一个元素会将其与之前的位置分离，因此input会在DOM中继续移动。

这就是你必须在附加元素之前克隆元素的原因：）

Answer 4

为什么不看看这个页面？ http://javascript.info/tutorial/memory-leaks

我想这与JS的垃圾收集器机制有关。

使用相同的jQuery对象设置不同的html节点时出现问题

4 个答案: