php - jQuery on document ready ajax插入html，html立即消失

Question

想法是循环遍历正文中的 div，类为“可编辑”的 div 然后有一个脚本从数据库中的相应 id 插入 html。(稍后，将实现发送更改。)这似乎是一个时间障碍尽管在插入 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 脚本并没有很好地发挥作用，所以我将实例脚本包围在一个 document.ready 中

   <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 之后的内容已经触发(即使它们是按完成顺序排序的)。