使用jQuery .clone()复制元素后复用异常，求保留状态的解决办法

问题场景 #

尝试复用包含复选框的元素，使用jQuery的.clone()方法时出现异常：修改.test1内的复选框状态后，克隆的元素仅会保留在#test3中，#test2里的元素会被移除。

代码示例 #

JavaScript

$('.test1').on('change', ':input', function() {
  $temp = $(".test1").clone()[0];
  $('#test2').html($temp);
  $('#test3').html($temp);
});

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="test1">
  <input type="checkbox" checked> a<br/>
  <input type="checkbox" checked> b<br/>
</div>

<div>Test 2</div>
<div id="test2"></div>

<div>Test 3</div>
<div id="test3"></div>

问题原因 #

同一个DOM节点无法同时存在于DOM树的两个不同位置。你只克隆了一份DOM元素，当第二次调用.html($temp)时，这个节点会从#test2的位置被移动到#test3，导致#test2为空。

解决办法 #

需要为#test2和#test3分别提供独立的克隆副本，有两种实现方式：

方式1：每次插入时单独克隆 #

直接为每个目标容器克隆一份元素，确保它们是独立的DOM节点：

$('.test1').on('change', ':input', function() {
  $('#test2').html($(".test1").clone());
  $('#test3').html($(".test1").clone());
});

方式2：提前克隆两份副本 #

先克隆出两个独立的副本，再分别插入到目标容器：

$('.test1').on('change', ':input', function() {
  const $cloneForTest2 = $(".test1").clone();
  const $cloneForTest3 = $(".test1").clone();
  $('#test2').html($cloneForTest2);
  $('#test3').html($cloneForTest3);
});

关于状态保留 #

jQuery的.clone()方法默认会复制元素的属性和当前状态（包括复选框的checked状态），所以上述两种方法都能完整保留.test1内复选框的修改状态。如果需要同时复制元素绑定的事件，可以给.clone()传入true参数（即$(".test1").clone(true)），你的场景中无需此操作，默认即可满足需求。

内容的提问来源于stack exchange，提问作者Robbie