javascript - TinyMCE 不启动 ajax 加载的文本区域

Question

我使用$.ajax()将这段html加载到div中

<div class="board-container">
    <form method="post" action="functions.php">
        <input type="hidden" name="function" value="set_boards">
        <div class="row-fluid">
            <div class="span6">
                <h3 class="dark">Student Board</h3>
                <textarea id="board_students" name="board_students">

                </textarea>
                <br>
            </div>
            <div class="span6">
                <h3 class="dark">Instructor Board</h3>
                <textarea id="board_instructors" name="board_instructors">

                </textarea>
                <br>
            </div>
        </div>
        <a href="#" class="btn btn-inverse btn-large btn-center">Update Boards</a>
    </form>
</div>

<script src="libs/tinymce/tinymce.min.js"></script>
<script src="js/board.js"></script>

在 board.js 中，只有一个 TinyMCE 启动函数。

$(function()
{
    tinymce.init({
        menubar : false,
        height: 700,
        selector: "#board_students"
    });
});

由于ajax请求，ready()函数应该被自动调用。我已经用警报进行了测试，我知道该函数被调用。
如果 html 默认位于 div 中，则该代码可以工作，但是当通过 ajax 加载时，不会发生任何情况。这是为什么？

Answer 1

发生这种情况是因为你的ajax异步加载内容，而你的微小初始化函数同步发生，可能是初始化发生在内容放入你的dom之前。另一件事是你不应该在 html data 中加载脚本。 解决这个问题

如果你想异步加载脚本意味着你必须使用 js 创建一个脚本标签元素，例如

    var jsonp = document.createElement("script");
    jsonp.type = "text/javascript";
    jsonp.src = "libs/tinymce/tinymce.min.js";
    document.getElementsByTagName("body")[0].appendChild(jsonp);

或者您可以在页面本身中包含 tinymce.min.js 并在内容加载后初始化 div，如

$.ajax({
         url: url,
         type: type,
         data: data,
         success: function(htmlData){
              $('#DivId').append(htmlData);
              //here internalize tiny mice when its available in dom   
              tinymce.init({
                 menubar : false,
                 height: 700,
                 selector: "#board_students"
              });
         }
   });

试试这个，让我知道这是否有效......!!!