通常情况下,原始元素上绑定的任何事件处理程序都不会被复制到克隆元素。可选的withDataAndEvents参数可以改变这种行为,并将所有事件处理程序的副本一同绑定到新元素上。自jQuery 1.4以来,所有通过.data()方法附加的元素数据也会复制到新元素中。
然而,在元素数据中的对象和数组并不会被复制,它们将继续在克隆元素和原始元素之间共享。要深度复制所有数据,请手动复制每一个元素:
var $elem = $('#elem').data( "arr": [ 1 ] ), // Original element with attached data
$clone = $elem.clone( true )
.data( "arr", $.extend( [], $elem.data("arr") ) ); // Deep copy to prevent data sharing
自jQuery 1.5版本以来,可以选择使用deepWithDataAndEvents来增强withDataAndEvents,以复制克隆元素的所有子元素的事件和数据。
来源:http://api.jquery.com/clone/
我相信您正在寻找上面的代码,它实际上是复制与元素相关联的数据,而不是在元素之间共享数据。
更新
在这里尝试了几分钟后,我得出了以下结论:
var $input = $("input").datepicker(),
$clone = $input.clone(true).data( "datepicker", $.extend( true, {}, $input.data("datepicker") ) ).attr('id', 'test-id');
$clone.data('datepicker').input = $clone;
$clone.data('datepicker').id = 'test-id';
$("body").append("<br><br><br>Input 2: ").append(
$clone
);
以下是一个演示:http://jsfiddle.net/YUkZw/5/
datepicker
数据以克隆而不仅仅是复制它,那么每个元素都会有自己的一组数据(请参见:http://jsfiddle.net/YUkZw/5/)。然后对于克隆体,您必须设置其`datepicker`数据中的引用以引用克隆体。 - Jasper.clone()
:$.fn.customClone = function ($ele) { return $ele.clone(true); }
。当然,这个例子没有什么好处,但是你可以在这个自定义函数中做额外的工作,这样你就可以只调用$clone = $input.customClone();
。 - Jasper