How to clone elements related to jQuery UI widgets?

Question

The following code cannot clone an input element correctly. Pressing / focusing on the cloned input opens a datupick on the original input.

http://jsfiddle.net/musicisair/YUkZw/

<input> <script> var input = $("input").datepicker(); $("body").append("<br>Input 2: ").append( input.clone(true); ); </script> 

Is there a proper way to clone elements related to jQuery UI widgets? If so, what is it?

Answer 1

Usually, any event handlers associated with the source element are not copied to the clone. The optional withDataAndEvents parameter allows us to change this behavior and instead make copies of all the event handlers associated with the new copy of the element. Starting with jQuery 1.4, all element data (attached with the .data () method) are also copied to a new copy.

However, objects and arrays inside the element data are not copied and will still be shared between the cloned element and the original element. To copy all the data, copy it manually:

 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 

As with jQuery 1.5, withDataAndEvents can be further enhanced by using deepWithDataAndEvents to copy events and data for all children of the cloned element.

Source: http://api.jquery.com/clone/

I believe that you are looking for the code above that actually copies the data associated with the element, rather than sharing data between the elements.

Update

After a few minutes of dealing with this here, I came up with:

 //create original datepicker var $input = $("input").datepicker(), //clone the datepicker, copy the data from the original, and change the ID of the new element $clone = $input.clone(true).data( "datepicker", $.extend( true, {}, $input.data("datepicker") ) ).attr('id', 'test-id'); //now change the references in the data for the clone to point to the clone $clone.data('datepicker').input = $clone; $clone.data('datepicker').id = 'test-id'; //add the clone to the DOM $("body").append("<br><br><br>Input 2: ").append( $clone );​ 

And the demo: http://jsfiddle.net/YUkZw/5/

Answer 2

Here is my trick.

If you need to clone an element with widgets, do not bind the widget to document.ready. Instead, restore the widget every time the elements get focus.

 $(document).ready(function(){ $("[type=date]").focusin(function(){ $("[type=date]").not(this).datepicker("destroy"); if($(this).data("datepicker") == null) { $(this).datepicker({dateFormat: 'yy-mm-dd'}); } }); });