CODEWITHSUNDEEP
javascriptjquery
user2884789
user2884789

Reputation: 533

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?

Upvotes: 0

Views: 122

Answers (1)

charlietfl
charlietfl

Reputation: 171698

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(){...})

Do

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

Upvotes: 1

Related Questions