user2884789 user2884789 - 10 months ago 66
jQuery Question

jquery clone() with deep copy affecting draggable

I have an application where a button is clicked and a cloned copy of a DOM element is created and placed in a specific location on the page. This cloned copy needs to be a deep copy because there are events contained in it's children elements. Therefore the code to create the clone is:

var $cloneTags = $div.clone(true, true).attr('id', obj + num);

However, when adding
true, true
this has the effect of messing up the draggable functionality of the cloned object (this happens only with the second clone and any subsequent ones). If I get rid of
true, true
, this line of code does what it should and the subsequent objects are draggable:

$cloneTags.draggable({ cursor: "move", snap: '#dropHere', helper: "clone" });

However this has the effect of the children element's event handlers no longer work.

My question is how can I create a deep copy but still have each cloned element be individually draggable?

Answer Source

My suggestion is to make sure all the events in the children are managed by "event delegation" and not binding directly to the elements themselves.

Then you can use a shallow clone and not run into conflicts

Instead of doing:

$('.my-draggable-item .someChild').click(function(){...})


$('#mainContainer').on('click', '.my-draggable-item .someChild', function(){...})