jquery 克隆

jQuery 克隆元素的方法

使用 jQuery 的 .clone() 方法可以复制匹配的 DOM 元素及其所有子元素和事件处理程序。以下是详细说明和示例：

基本克隆

默认情况下，.clone() 仅复制元素及其子元素，不复制事件处理程序和数据：

var clonedElement = $('#element').clone();

克隆包含事件处理程序

通过传递 true 参数，可以克隆元素及其事件处理程序：

var clonedElementWithEvents = $('#element').clone(true);

克隆包含数据和事件

传递两个 true 参数可以克隆元素、事件处理程序以及关联的数据：

var clonedElementWithDataAndEvents = $('#element').clone(true, true);

示例代码

<div id="original" class="box">点击我</div>
<div id="container"></div>

<script>
  $('#original').click(function() {
    alert('原始元素被点击');
  });

  // 克隆元素并保留事件
  var cloned = $('#original').clone(true);
  $('#container').append(cloned);
</script>

注意事项

• 克隆的元素会复制所有属性，包括 id。如果页面需要唯一的 id，需手动修改。
• 使用 clone(true, true) 会深度复制所有数据和事件，但可能影响性能。