jQuery在准備好ajax的文檔上插入html，html立即消失

Question

想法是循環遍歷正文中的div，使用“可編輯”類的div，然后使用腳本從數據庫中相應的id插入html。（稍后，將實現發送更改。）在插入div時似乎存在計時障礙HTML。

頁腳有兩個腳本。 如果管理員已登錄，則第一個將這個div修改為內聯可編輯區域。（使用CKeditor）

第二個腳本是此文檔准備好的腳本，它從數據庫中提取div的html內容。 無論登錄狀態如何，它都會觸發。

    <script>
    $(document).ready(function(){

        $(".editable").each(function(){

            var div = $(this).attr('id');
            var divstring = "#" + div;

        $.post("getdbhtml.php", 
                {
                id:div
               }).done(function( html ) {
        $(divstring).html(html);

                });
        });
    });

    </script>

這是返回div內容的簡單getdbhtml.php文檔

    $id = $_POST['id'];


    $query = "select * from edit where div_id='$id' limit 1";

    $result = $db->doQuery($query) or die(mysql_error());

    while($row = $result->fetch_object()) {

        $content = $row->content;   
    }

     echo $content;

發生的情況是頁面加載，插入的html內容閃爍，然后閃爍。 實際上每十個頁面加載一次。
我的直覺是，當第二個腳本啟動時，ckeditor仍會自行生成，但是我試圖通過使其“在文檔准備就緒”來解決該問題。 但是，即使未登錄管理員（即未觸發ckeditor時），它仍然會閃爍。
在第二個腳本上加上時間延遲是很愚蠢的。 我還嘗試將第二個腳本作為第一個.done（html {}）;的擴展。 我也嘗試通過常規的$ .ajax（）調用而不是專門的發布來執行此操作，但是它的行為相同。

有任何想法為什么要這樣做或如何解決？

編輯：

該網頁非常簡單，目標div是這樣的：

<div id="inner" style="padding-top: 0; margin-top: 0;">
                <div contenteditable="true" id="editor1" class="editable" style="padding: 0; margin: 0;">
        </div>    
 </div>

在chrome調試器中，ckeditor確實為＃editor1上的類添加了可觀的數量

    <div contenteditable="true" id="editor1" class="editable cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" style="padding: 0px; margin: 0px; position: relative;" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor1" title="Rich Text Editor, editor1" aria-describedby="cke_44"></div>

現在插入的代碼還沒有html字符，我只想在更正任何html標記問題之前使插入工作。 內容類似於“現在您有機會注冊XYZ”。 沒有引號。

Answer 1

我想出了一個解決方案，基本上這就是頁腳的布局方式

首先是庫腳本

<script src="path/ckeditor.js"></script>

這兩個ckeditor腳本不能很好地播放，所以我將實例腳本放在了文檔中。

   <script>
   $(document).ready(function(){
    ...ckeditor instance...
   });
   </script>

並且ajax數據庫內容腳本有一個document.ready，最后增加了一點延遲：

  <script>
    $(document).ready(function(){
   });
   setTimeout(
        function()
        {  
                  $(".editable").each(function(){

                      var div = $(this).attr('id');
                      var divstring = "#" + div;

                  $.post("getdbhtml.php", 
                          {
                          id:div
                         }).done(function( html ) {
                  $(divstring).html(html);

                          });
                  });

                }, 100);
   </script>

它已經捕獲了幾次，因此似乎稍微延遲了100分鍾即可解決計時問題。 對於此編輯目的，這幾乎是不可感知的並且很好。

我認為發生這種情況的原因是因為ckeditor實例最終修改了div，包括以某種方式截斷/修改了div的內容（默認情況下會添加p標簽，盡管我已將其關閉。）因此，可能在之后覆蓋了內容ajax已被解雇（即使已按完成順序訂購）。