jquery克隆

jQuery 克隆方法

jQuery 提供了 .clone() 方法用于克隆 DOM 元素及其子元素。该方法可以复制元素的结构、内容和事件。

基本语法：

$(selector).clone([withDataAndEvents][, deepWithDataAndEvents])

参数说明：

• withDataAndEvents（可选）：布尔值，默认为 false。设置为 true 时，克隆的元素会保留原元素的数据和事件。
• deepWithDataAndEvents（可选）：布尔值，默认为 false。设置为 true 时，克隆的元素及其子元素会保留原元素的数据和事件。

克隆元素

克隆一个元素并将其插入到 DOM 中：

var clonedElement = $('#original').clone();
$('#target').append(clonedElement);

克隆元素并保留事件

克隆元素并保留其绑定的事件：

var clonedElement = $('#original').clone(true);
$('#target').append(clonedElement);

克隆元素及其子元素并保留事件

克隆元素及其子元素，并保留所有绑定的事件：

var clonedElement = $('#original').clone(true, true);
$('#target').append(clonedElement);

克隆表单元素

克隆表单元素时，需要注意表单元素的 id 属性可能会重复，需要手动修改：

var clonedForm = $('#originalForm').clone();
clonedForm.find('input').each(function() {
    $(this).attr('id', $(this).attr('id') + '_clone');
});
$('#target').append(clonedForm);

克隆表格行

克隆表格行并插入到表格中：

var clonedRow = $('#originalRow').clone();
$('#table').append(clonedRow);

注意事项

• 克隆的元素会保留原元素的 id 属性，可能会导致 id 重复，需要手动修改。
• 克隆的元素不会自动插入到 DOM 中，需要使用插入方法（如 .append()、.prepend() 等）将其添加到页面中。
• 如果克隆的元素绑定了事件，需要设置 withDataAndEvents 参数为 true 才能保留事件。