0

我使用 $.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 加载时，没有任何反应。这是为什么？

4

3 回答 3

3

发生这种情况是因为您的 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"
              });
         }
   });

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

于 2013-11-23T10:27:38.277 回答
2

发生这种情况的原因是，ajax 在 --page load-- 之后添加了您的内容。因此，它不会读取代码并将其添加到 DOM，因为您是在页面加载后添加的。

正如许多人所说，您可以预加载此信息，或者如果您想使用 AJAX。

初始化代码的最简单方法是在 ajax 调用结束时添加一个 .complete 函数。这表示当 ajax 函数运行完毕后，继续执行此操作。 

$.ajax({
  type: "POST", #GET/POST
  url: "some.url",
  data: {}
})
.complete(function() {
    tinymce.init({
    menubar : false,
    height: 700,
    selector: "#board_students"
  }
});

jQuery Ajax 调用

于 2013-11-25T18:51:26.543 回答
0

您案例中的<script>块将在同一时刻异步开始执行，并且仅仅因为 tinymce 是最大的脚本，tinymce.init将会失败。

您需要将脚本加载为附加的 ajax 调用级联：

$.get(...., function (){// first level, getting the html
    $.getScript(...., function (){// second level, getting <script src="libs/tinymce/tinymce.min.js"></script>
         // executing or loading js/board.js 
    });
});
于 2013-11-20T07:05:41.923 回答