Reintialize TinyMCE after jQuery Load

Bump into the problem of reintializing TinyMCE textbox after replacing the DOM with jQuery load.

The Problem

1. After saving a form on a page (with multiple forms), I did a jQuery.load() to replace the DOM of the particular section.
2. Then I run the initialization function to reinitialize all DOMs, including TinyMCE.
3. I realized TinyMCE contents is not saved after this.

Solution: Initial attempt

After Google-ed for a while, I found this solution from StackOverflow.

tinymce.execCommand('mceRemoveControl', true, 'editor_id');

So, to use it, it would be...

_init = function() {

 /* Some other initialization code here */
 tinymce.execCommand('mceRemoveControl', true, 'editor_id');

tinyMCE.init({
  /* TinyMCE options */
 });
}

Oh, wait...

Some issues:

1. My 'editor_id' is dynamic... 
2. I have multiple textboxes

Solution: Second attempt.

Easy. Just use jQuery.each() to loop through all the textbox and remove TinyMCE control from each of them.

_init = function() {
 jQuery('textarea').each(function() {
  try {
   tinymce.execCommand('mceRemoveControl', true, jQuery(this).attr('id'));
  } catch(e) {
  }
 })
 tinyMCE.init({
  /* TinyMCE options */
 });
}

Oh, wait... again...

Some more issues:

1. Due to asynchronous nature of Javascript, tinyMCE.init() will be executed befure jQuery.each() finishes.

Final Solution

Chain the functions together with jQuery.promise().

jQuery('textarea').each(function() {
 try {
  tinymce.execCommand('mceRemoveControl', true, jQuery(this).attr('id'));
 } catch(e) {
 }
  
}).promise().done( function() {
 tinyMCE.init({
  /* TinyMCE options */
 });
});

:)