jQuery Clone()

简介

jQuery clone() 方法用于创建被选元素的副本。该方法将复制元素及其所有后代。如果传递参数 true，还将复制元素的事件处理程序。这使得允许在不影响原始元素的情况下对其副本进行更改或修改。

语法

$(selector).clone(withDataAndEvents)

• selector: 必需。规定您希望复制哪个元素。
• withDataAndEvents: 可选。规定是否复制元素的数据和事件处理程序。值为 true/false。

返回值

jQuery clone() 方法返回被复制元素的副本。

示例

复制元素

下面的示例演示如何使用 jQuery clone() 方法复制一个元素:

// 获取元素
var original = $("#original");

// 复制元素
var clone = original.clone();

// 将副本插入文档中
$("body").append(clone);

应用事件处理程序

下面的示例演示如何使用 jQuery clone() 方法复制一个元素及其单击事件监听器:

// 获取元素
var original = $("#original");

// 复制元素并应用事件处理程序
var clone = original.clone(true);

// 将副本插入文档中
$("body").append(clone);

// 添加新事件处理程序到副本
clone.on("click", function() {
  alert("Copy clicked!");
});

复制元素及数据

下面的示例演示如何使用 jQuery clone() 方法复制一个元素及其相关数据:

// 获取元素
var original = $("#original");

// 设置相关数据
original.data("name", "Original");

// 复制元素及数据
var clone = original.clone(true, true);

// 在副本上获取数据
var name = clone.data("name");

// 输出结果
console.log(name); // Original

注意事项

• 对于事件处理程序，在副本上添加、删除、更改事件处理程序不会影响原始元素或其事件处理程序。
• withDataAndEvents 参数默认为 false。如果未指定该参数，则不会复制元素相关的所有数据和事件处理程序。
• 如果要复制 select 元素，请确保将 selected 属性设置为 true，以便正确复制所选选项。