将富文本加载到通过 ajax 加载的 innerHTML答案

【问题标题】：Load rich text into innerHTML loaded via ajax将富文本加载到通过 ajax 加载的 innerHTML
【发布时间】：2012-11-08 22:18:13
【问题描述】：

我有 2 个 div：主 div 和次要 div，这是一个在单击主 div 中的链接时加载的 innerHTML 页面。在二级 div 中是通过 python Django 插入的注释区域。对于该评论区，我正在尝试应用富文本 jquery 插件。我知道在使用 ajax 时，innerHTML 页面中的脚本被剥离，只加载内容。我尝试在主 div 中引用插件，但它在加载 ajax 页面之前触发，因此富文本仍然没有应用。有没有办法在加载页面后触发插件？或者解决这个问题的最佳方法是什么？我可以使用 onreadystatechange 吗？

主页：

<div class="content">
    <div class="main">
                <!-- bunch of content here -->
            </div>
    <div class="main">
                <!-- loads another HTML page -->
            </div>

我尝试应用富文本的辅助页面表单字段（在单独的 HTML 页面上）：

<p>{{ form.as_p }}</p>

Javascript 加载函数：

var url;
$('.linkQuestion').on('click', 'a', function(ev) {
    url = $(this).attr('href');
    $('.answers').load(url, function(){
        $.getScript('https://s3.amazonaws.com/javascript/richTextEditor.js', function() {
            bkLib.onDomLoaded(function() { nicEditors.allTextAreas() }); 
        });

    }); 
return false;
});

调用插件：

 <script type="text/javascript" src="{{ STATIC_URL }}js/richTextEditor.js"></script>
 <script type="text/javascript">
    bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
 </script>

我知道已经有人问过很多类似的问题，我查看了所有这些问题，但我仍然无法让它发挥作用。帮助将不胜感激。

【问题讨论】：

标签： jquery ajax

【解决方案1】：

在 ajax 请求完成后使用回调并应用插件。

$('.secondary').load(url, function(){
    // call your plugin here on the content. 
});

【讨论】：

aziz 我试过了，在主页和辅助页面上都引用了脚本。好像还是不行
asovgir。你如何在你的页面上调用插件？你可以发布代码吗？我从未使用过该插件，所以我不知道如何调用它。我给你举个例子。
我不认为简单地引用它会起作用。您必须在 jquery 对象上隐式调用该方法。
刚刚添加了我如何正常拉取它的插件。我这样引用它： $('.secondary').load(url, function(){ bkLib.onDomLoaded(function() { nicEditors.allTextAreas() }); });

【解决方案2】：

你能做这样的事吗？

$(document).ready(function() {
    var url;
    $('.main a').on('click', function() {
        url = $(this).attr('href');

        $.get(url, function(result) {
            $('.secondary').html(result);
        }

        return false;
    });
});

但是，您需要一个 class= "secondary" 的元素来将内容放入

<p class="secondary"></p>

【讨论】：

斯科特
与表单是一个单独的 HTML 页面