Question

这个想法是循环遍历身体中的div，divs with class＆＃34; editable＆＃34;然后有一个脚本从数据库中的相应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仍在生成自己，但我试图通过在文档准备好的情况下使其成为＆＃34;来解决这个问题。但是，即使没有登录管理员，换句话说，当没有触发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标记问题之前使插入工作。它类似于＆＃34;现在您有机会注册XYZ。＆＃34;没有引号。

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>

它已经捕捉了几次，所以一点点延迟似乎解决了时间问题。对于这种编辑目的来说，它几乎不可察觉。

我认为发生这种情况的原因是因为ckeditor实例最终修改了div，包括以某种方式截断/修改div内容（它默认添加了p标签，尽管我把它关闭了。）所以它有可能被覆盖ajax已经解雇后的内容（即使它们按完成顺序排序）。

jQuery on document ready ajax insert html，html立即消失

1 个答案: