jQuery Re-Initialize Query On Click

[MoFish]

Hi,

 

I have a WYSIWG editor (called summernote) on my page. I also have a button #add-another which will clone the editor and add multiple.

 

The issue im having is that im unclear on how best to re-initialise the editors on a button click, as the page does not reload. Can anyone advise?

 

Should i somehow destroy the editors, then reinitialise? little confused.

 

I have the following so far, but not sure if im going down the right path, as its not working correctly.

 

Regards,

 

MoFish

<script>
$(document).ready(function() {
	function initialize() {
		$('.wysiwyg').summernote({
			height:150,
			minHeight: null,
			maxHeight: null
		});
	}

	initialize();

	$("#add-another").click(function(e) {
		e.preventDefault();
		$("#meta-clone").clone().appendTo("#meta-container");
		initialize();
	});
});
</script>

[kicken]

There is no need to re-initialize already existing editors, you only need to initialize the one in your new cloned area. You'd do that by finding the editor element in the clone then calling the summernote function on it.

 

$("#add-another").click(function(e) {
	e.preventDefault();
	var clone = $("#meta-clone").clone();
	clone.appendTo("#meta-container");

	clone.find('.wysiwyg').summernote({height: 150, minHeight: null, maxHeight: null});
});

On another note, if your currently cloning an existing already-initialized editor you should probably not be doing that. The clone should only have the editor placeholder element, then you initialize the editor after cloning.