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数据中加载脚本。解决这个问题

如果要加载脚本异步，则意味着必须使用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"
              });
         }
   });

试试这个并告诉我这是否有效...... !!!

Answer 2

发生这种情况的原因是因为，ajax会在AFTER --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 Call

Answer 3

你的案例中的<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 
    });
});

TinyMCE不会启动ajax-loaded textarea

3 个答案: