DOM标签每次发生变化时如何执行js函数？

Question

我在一个表单中有 tinymce 插件，问题是表单是在满足特定条件时动态创建的，并且不断创建和删除 tinymce 容器。

我在控制台中收到此错误：

tinymce.js:25473 Uncaught TypeError: Cannot read property 'open' of undefined
    at initContentBody (tinymce.js:25473)
    at init (tinymce.js:25610)
    at init (tinymce.js:25723)
    at Editor.<anonymous> (tinymce.js:25841)
    at Array.<anonymous> (tinymce.js:7470)
    at each (tinymce.js:2585)
    at loadScripts (tinymce.js:7467)
    at tinymce.js:7454
    at HTMLScriptElement.done (tinymce.js:7362)

我想是因为tinymce不知道应该从哪里开始，但我不确定根据我的结构哪个事件可以解决这个问题。

这是我的表格：

<?php

if (isset($_POST['type'])) {
   $type = $_POST['type'];
} else {
   $type= '1';
}

switch ($tipo) {
 case '1': ?>
   <form>
   <!-- content for 1 -->
   <textarea id="text1" class="editor" cols="55" rows="20" require"></textarea>
   </form> <?php
   break;

 case '2': ?>
   <form>
   <!-- content for 2 -->
   <textarea id="text2" class="editor" cols="55" rows="20" require"></textarea>
   </form> <?php
   break;

 case '3': ?>
   <form>
   <!-- content for 3 -->
   <textarea id="text3" class="editor" cols="55" rows="20" require"></textarea>
   </form> <?php
   break;
  
 default:
   # code...
   break;
}
?>

单击按钮更改表单时，ajax 发送变量 $_POST ['type']。如果你知道如何解决这个问题，我将不胜感激你的回答。 tinymce 使用编辑器加载到 textarea class.

如果您需要任何其他信息，请问我。非常感谢。

取得的进展：

我设法找到了一种方法，让 javascript 在每次发生变化时观察 DOM 和运行 tinymce 设置的变化：

var observeDOM = (function(){
  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver, eventListenerSupported = window.addEventListener;
  return function(obj, callback){
      if( MutationObserver )
  { // define a new observer

var obs = new MutationObserver(function(mutations, observer){
  if( mutations[0].addedNodes.length || mutations[0].removedNodes.length ) callback();
}); // have the observer observe foo for changes in children

obs.observe( obj, { childList:true, subtree:true });
} else if( eventListenerSupported ){ obj.addEventListener('DOMNodeInserted', callback, false); obj.addEventListener('DOMNodeRemoved', callback, false); } } })(); // Observe a specific dom element:

observeDOM( document.getElementById('formCrear') ,function(){ 
  // console.log('dom changed');
  iniciar();
});

function iniciar() {
  tinymce.init({
    selector: ".editor",  // change this value according to your HTML
    language: "es",
    encoding: "UTF-8",
    entity_encoding: "raw",
    plugins: [
      'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
      'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
      'table template paste codesample'
    ],
    toolbar: 'styleselect | bold italic underline removeformat | alignleft aligncenter alignright alignjustify | ' +
      'bullist numlist outdent indent | link image media codesample',
    menubar: 'file edit view insert tools table',
    menu: {
      file: { title: 'File', items: 'newdocument | print' },
      edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },
      view: { title: 'View', items: 'visualaid visualchars visualblocks | preview fullscreen' },
      insert: { title: 'Insert', items: 'charmap hr | pagebreak nonbreaking anchor toc | insertdatetime' },
      table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' }
    },
    style_formats_merge: true,
    statusbar: false,
    width : '100%',
    height : '380',
  });
}

Tinymce 一开始显示正确，问题是如果我激活第一个表单，然后激活第二个，然后 return 到第一个，它不再激活。也就是说，它只在第一次创建表单时被激活，如果它被更改为另一个然后 returns 到之前显示的那个，它不再出现，直到页面重新加载。

Answer 1

好吧，我是这样解决的：我必须在 tinymce 的两个文件中添加 mutationobserver，以便在完成操作时连续读取它们，在 DOM 中观察到变化然后它读取包含tinymce工作数据的函数的数据。

init();
$('.listBlog a').on('click', function(){
  var observeDOM = (function(){
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver, eventListenerSupported = window.addEventListener;
    return function(obj, callback){
        if( MutationObserver ) { // define a new observer
  
      var obs = new MutationObserver(function(mutations, observer){
        if( mutations[0].addedNodes.length || mutations[0].removedNodes.length )
        callback();
        obs.disconnect();
      }); // have the observer observe foo for changes in children
      
      obs.observe( obj, { childList:true, subtree:true });
      } else if ( eventListenerSupported ){
        obj.addEventListener('DOMNodeInserted', callback, false);
        obj.addEventListener('DOMNodeRemoved', callback, false);
      }  
    }
  })(); // Observe a specific dom element:

  observeDOM( document.getElementById('formCrear') ,function(){ 
    // console.log('dom changed');
    init();
  });
  
});

function init() {
// data of custom.tinymce.js
}

相同，但在文件中 tinymce.min.js

DOM标签每次发生变化时如何执行js函数？

How to execute a js function every time a change occurs in a DOM tag?

javascript

php

jquery

tinymce