Froala 在使用初始化和销毁几次后 Ajax 加载 textarea 失败

Question

要更新一些博客数据，单击“编辑”按钮会启动一个 Ajax 调用，为 Froala 加载文本区域并在同一例程中初始化 Froala。它显示正确。我单击提交按钮，这是另一个破坏 Froala 实例并清空文本区域以在另一个博客上重新开始的例程。

这似乎适用于 edit/submit 的几个周期（1、2 或 3 - 不一致），然后失败并且文本区域不再呈现为 Froala 界面。

我确实遇到了 Javascript 错误，但我很难理解和追踪错误的来源，因为大多数指向 Jquery 问题。我怀疑这些是关键，但也许有人可以在我努力理解这些错误时指出一些明显的东西。最后我会 post 其中一些。

//The textarea is appended to id="edit_data"
//It is: '<textarea id="article">{blog data here}</textarea>'
//this would be the (data) that comes through Ajax.
//HTML:
<div id="edit">
    <div id="edit_data"></div>    
</div>

//would get this after Ajax call
<div id="edit_data">
        <textarea id="article">{Froala blog data here}</textarea>
</div>    

//JS code when edit button clicked that appends textarea and initializes Froala
    $(document).on('click', '#edit_blog', function(){ 
            $.ajax({
                type: "POST",
                url: 'blog_list_ajax.php',
                async : false,
                data: { "action":'edit_blog',
                        "post_id":post_id},
                success: function(data) {
                        $('#edit_data').append(data);
                        $('#edit').fadeIn(1000);
                },
                error: function() {
                    alert('Ajax Failed');
                }
            });

              // Froala Initialize action.
              if (!$('#article').data('froala.editor')) {
                $('#article').froalaEditor();
              } 
    });

//JS code when submit button clicked that destroys Froala and empties textarea
    $(document).on('click', '#update', function(){               
        //Destroy Froala instance        
        if ($('#article').data('froala.editor')) {
          $('#article').froalaEditor('destroy');
        }          
        $('#edit_data').empty();
        $('#edit').hide();
    });

预计 Froala 初始化和销毁应该已经完成了，即使每次加载新的 <textarea>s。

JAVASCRIPT 错误：

VM17117:29 Uncaught TypeError: $.widget is not a function
    at <anonymous>:29:7
    at <anonymous>:590:3
    at m (VM17076 jquery-3.3.1.min.js:2)
    at Function.globalEval (VM17076 jquery-3.3.1.min.js:2)
    at text script (VM17076 jquery-3.3.1.min.js:2)
    at Ut (VM17076 jquery-3.3.1.min.js:2)
    at k (VM17076 jquery-3.3.1.min.js:2)
    at XMLHttpRequest.<anonymous> (VM17076 jquery-3.3.1.min.js:2)
    at Object.send (VM17076 jquery-3.3.1.min.js:2)
    at Function.ajax (VM17076 jquery-3.3.1.min.js:2)

VM17119:7 Uncaught TypeError: Cannot read property 'POPUP_TEMPLATES' of undefined
    at <anonymous>:7:287
    at <anonymous>:7:240
    at <anonymous>:7:257
    at m (VM17076 jquery-3.3.1.min.js:2)
    at Function.globalEval (VM17076 jquery-3.3.1.min.js:2)
    at text script (VM17076 jquery-3.3.1.min.js:2)
    at Ut (VM17076 jquery-3.3.1.min.js:2)
    at k (VM17076 jquery-3.3.1.min.js:2)
    at XMLHttpRequest.<anonymous> (VM17076 jquery-3.3.1.min.js:2)
    at Object.send (VM17076 jquery-3.3.1.min.js:2)

VM17120:7 Uncaught TypeError: Cannot read property 'DEFAULTS' of undefined
    at <anonymous>:7:284
    at <anonymous>:7:240
    at <anonymous>:7:257
    at m (VM17076 jquery-3.3.1.min.js:2)
    at Function.globalEval (VM17076 jquery-3.3.1.min.js:2)
    at text script (VM17076 jquery-3.3.1.min.js:2)
    at Ut (VM17076 jquery-3.3.1.min.js:2)
    at k (VM17076 jquery-3.3.1.min.js:2)
    at XMLHttpRequest.<anonymous> (VM17076 jquery-3.3.1.min.js:2)
    at Object.send (VM17076 jquery-3.3.1.min.js:2)

...还有更多错误，但不确定它们对 post 这里有多大用处。

我应该补充一点，Froala 给出了初始化和销毁的简单示例 here。

Answer 1

上面的代码工作正常。问题是与包含多个 javascript（jquery、tagit、bootstrap 等）文件的头文件的双重加载发生冲突，导致错误累积，最终导致奇怪的行为。更正此问题后，Froala initiate/destroy 功能完美运行！

Froala 在使用初始化和销毁​​几次后 Ajax 加载 textarea 失败

Froala fails on Ajax load of textarea after a few times using initialize and destroy

javascript

jquery

froala

Froala 在使用初始化和销毁几次后 Ajax 加载 textarea 失败