如何使用 JQuery 克隆包含没有事件的数据的元素答案

【问题标题】：How to clone an element with data without events with JQuery如何使用 JQuery 克隆包含没有事件的数据的元素
【发布时间】：2012-10-30 15:18:49
【问题描述】：

我想克隆一个 <select> 标记，它的数据属性但没有它的事件。

在JQuery Official .clone() api 之后，我知道我可以通过调用在没有数据和事件的情况下进行克隆 $('#grolsh').clone()，或者执行一个

$('#grolsh').clone(true) 将复制数据和事件。

我想保留数据但清除与原始项目关联的事件。

【问题讨论】：

标签： jquery

【解决方案1】：

从 1.7 版开始，off() 是解除绑定的首选方法：

$('#grolsh').clone(true).off();

【讨论】：

【解决方案2】：

随便用

$('#grolsh').clone(); // 复制元素结构

$('#grolsh').clone(true) // 复制数据和事件以及结构

$('#grolsh').clone(true).off() // 复制数据和事件并删除处理程序

与.on() 绑定并使用.off() 删除的事件；

与.bind() 绑定并使用.unbind() 删除的事件；

【讨论】：

第一种情况不成立，数据不是用clone()复制的，也没有参数jsfiddle.net/ALxz4
文档声明“从 jQuery 1.4 开始，所有元素数据（由 .data() 方法附加）也被复制到新副本中。”但从我的测试来看，正常的 clone() 并没有复制数据

【解决方案3】：

通过添加 .off()：

$('#grolsh').clone(true)
    .attr({'id': 'newGrolsh'})
    .off()
    .appendTo('#target');

更新： 正如 Adrian 所建议的那样， .off 将是比 .unbind 更好的解决方案

【讨论】：

【解决方案4】：

从 jQuery 版本 1.5 开始，您可以传递第二个参数（参见：.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )）而不是复制事件处理程序：

$('#grolsh').clone(true,false);

【讨论】：

不，这只是“一个布尔值，指示是否应复制克隆元素的所有子元素的事件处理程序和数据。” - 如果您的 #grolsh 没有任何事件，它可能看起来像，只是数据……但事实并非如此。

【解决方案5】：

如果您真的只想复制.data() 方法附加的数据不要滥用事件（取消）绑定，只需这样做：

var $original = $(".originalSelector");
var $clone = $original.clone().data( $original.data() );

因为当你将一个对象传递给.data() 方法时，它会用它扩展当前数据。

！重要提示！
如果您要使用存储 DOM 引用并使用它的东西，例如，您不能这样做。 jQuery UI 可拖动 等等...
=> 仅用于“纯”数据/基本类型

【讨论】：