jQuery的负载和TinyMCE的给了我一个“g.win.document为空”的后续加载

Question

所以......很兴奋，计算器上的第一篇文章

我有这个页面，点击一个按钮将调用editIEPProgram（） 。 editIEPProgram计算有多少特定的div存在，添加另一个div，使用'/content/mentoring/iep_program.php'中的html加载它，然后调用$（“textarea.tinymce”）。tinymce来添加一个富文本编辑器到新添加的文本框。它终于增加了一个处理新东西的选项卡，bob是你的叔叔。

它几乎可以工作。点击按钮第一个添加一切和一切炒作，在第二次和随后的点击，一切都添加，但tinymce无法启动（我猜），并给我“g.win.document为空”。我已经有一段时间了，失去了我所有的理智。请帮帮我。

function editIEPProgram(){ 
    var index = $("div[id^=iep_program]").size(); 
    var target_div = "iep_program_"+index; 
    $("#program_container") 
    .append(
    $("<div></div>") 
    .attr("id", target_div) 
    .addClass("no_overflow_control") 
    ); 

    $("#"+target_div).load 
    (
    "/content/mentoring/iep_program.php", 
    {index:index}, 
    function() 
    { 
    $("textarea.tinymce").tinymce({ 
    script_url: "/scripts/tiny_mce.js",height:"60", theme:"advanced",skin:"o2k7",skin_variant : "silver", 
    plugins : "spellchecker,advlist,preview,pagebreak,style,layer,save,advhr,advimage,advlink,searchreplace,paste,noneditable,visualchars,nonbreaking,xhtmlxtras", 

    theme_advanced_buttons1 : "spellchecker,|,bold,italic,underline,strikethrough,|,formatselect,|,forecolor,backcolor,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,image,cleanup,preview", 
    theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", 
    theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", 

    content_css : "/css/main.css" 
    }); 
    }); 
    $("#tab_container") 
    .tabs("add", "#"+target_div,"New program") 
    .tabs("select", $("#tab_container").tabs("length")-1); 
} 

Answer 1

来到这里的答案：

http://blog.mirthlab.com/2008/11/14/dynamically-adding-and-removing-tinymce-instances-to-a-page/

基本上 'tinyMCE的' 不会，如果目标文本区域是隐藏的工作。您必须修改文本的方式：

function editIEPProgram(){ 
    var index  = $("div[id^=iep_program]").size(); 
    var target_div = "iep_program_"+index; 

    $("#program_container").append($("<div>").attr("id", target_div).addClass("no_overflow_control")); 

    $("#"+target_div).load(
     "/content/mentoring/iep_program.php", 
     {index:index}, 
     function() 
     { 
      $("#tab_container") 
       .tabs("add", "#"+target_div,"New program") 
       .tabs("select", $("#tab_container").tabs("length")-1); 

      buildRTE(); 
     } 
    ); 
} 

function buildRTE(){ 
    $("textarea.tinymce").tinymce({ 
     script_url: "/scripts/tiny_mce.js",height:"60", theme:"advanced",skin:"o2k7",skin_variant : "silver", 
     plugins : "spellchecker,advlist,preview,pagebreak,style,layer,save,advhr,advimage,advlink,searchreplace,paste,noneditable,visualchars,nonbreaking,xhtmlxtras", 

     theme_advanced_buttons1 : "spellchecker,|,bold,italic,underline,strikethrough,|,formatselect,|,forecolor,backcolor,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,image,cleanup,preview", 
     theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", 
     theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", 

     content_css : "/css/main.css" 
    }); 
} 

Answer 2

尝试增加TinyMCE的是这样的：

tinyMCE.init({ 
    mode : "textareas", 
    theme : "advanced" 
}); 

function toggleEditor(id) { 
    if (!tinyMCE.get(id)) 
     tinyMCE.execCommand('mceAddControl', false, id); 
    else 
     tinyMCE.execCommand('mceRemoveControl', false, id); 
} 

即：

function editIEPProgram(){ 
    var index = $("div[id^=iep_program]").size(); 
    var target_div = "iep_program_"+index; 
    $("#program_container") .append($("") .attr("id", target_div) .addClass("no_overflow_control")); 

    $("#"+target_div).load ("/content/mentoring/iep_program.php", {index:index}, 
    function() { 
     toggleEditor(target_div); 
    }); 
    $("#tab_container") .tabs("add", "#"+target_div,"New program") .tabs("select", $("#tab_container").tabs("length")-1); 
} 

而且我觉得

.append($("") .attr("id", target_div) .addClass("no_overflow_control")); 

需要有提供莫名其妙

一个元素类型

即：

.append($("div") .attr("id", target_div) .addClass("no_overflow_control"));