Cloning container for reuse without all events and items connected later
I have a div container as a jQuery object that I use to switch images inside a class (javascript object). At some point, the user can choose to reset this container.
Instead of removing all HTML elements and all the click / drag / resize listeners that I have bound to this container to reset, I thought it would be nice to clone the container in my build function, so I can re-get it when I reload as such:
this.container = container;
//keep an original in case it needs to be reset
this.originalContainer = container.clone();
** reset method: **
redrawImageFromOriginal: function (newImage) {
this.image = newImage;
this.container = this.originalContainer;
this.placeImage(this.getImageWidth(), this.getImageHeight(), this.getImgX(), this.getImgY());
},
Obviously when I do this I lose the scope of the container I was working with. So, this.container
it becomes something different from this.container
what I have worked with so far.
Now, my question is in a nutshell: how can I return the container to its default (or lack thereof) so I can restore it however I want after that.
source to share
You need to clone data and events and when cloning, please follow below code:
this.container = container;
// keep the original if it should be reset
this.originalContainer = container.clone(true, true);
clone( [dataAndEvents] [, allDataAndEvents] )
dataAndEvents: A Boolean value that indicates whether event handlers and data should be copied along with the elements. The default is false.
allDataAndEvents: A Boolean value indicating whether to copy event handlers and data for all children of the cloned element. By default, its value matches the first argument (the default is false).
Hope this works for you :)
source to share