当使用AJAX html填充时,Jquery自定义内容滚动条会清空Div内容

当使用AJAX html填充时,Jquery自定义内容滚动条会清空Div内容,jquery,ajax,scroller,Jquery,Ajax,Scroller,我使用的是Jquery自定义内容滚动条,它看起来非常流行。我最初尝试使用它,然后切换到Nicescroller,它最初工作正常,但后来我用它的功能撞到了墙上,现在又回到了这里 我所做的事情并不复杂。数据来自AJAX,并输入到DIV中,然后在AJAX成功时将滚动条应用到DIV中。DIV实际上用于显示表单错误消息,它周围的主要HTML是表单字段。我认为这不相关,但我想提供所有相关信息 以下是AJAX调用的“成功”部分: success: function (data) { $('

我使用的是Jquery自定义内容滚动条,它看起来非常流行。我最初尝试使用它,然后切换到Nicescroller,它最初工作正常,但后来我用它的功能撞到了墙上,现在又回到了这里

我所做的事情并不复杂。数据来自AJAX,并输入到DIV中,然后在AJAX成功时将滚动条应用到DIV中。DIV实际上用于显示表单错误消息,它周围的主要HTML是表单字段。我认为这不相关,但我想提供所有相关信息

以下是AJAX调用的“成功”部分:

 success: function (data) {     
    $('#error_msg_div').html(data); 
    if (submit_status != "OK") //submit_status is a JS variable in data not set to OK  
    { //alert(..) here. At alert pause, error_msg_div shows AJAXed response data.
      //AJAXed response data has absolutely no reference to the DIV or the scroller 
      $("#error_msg_div").mCustomScrollbar({
        theme:"dark",
        scrollButtons:{
            enable:true
            },
        updateOnContentResize:true
      });  
    };
 },
AJAX响应的示例数据(从firebug复制)如下所示:

  <div class='err_no' style='left:0px;top:5px;'>1:</div><div style='left:22px;top:5px;' class='err_msg'>First name must have 2 to 20 alphabets only.</div>
  <div class='err_no' style='left:0px;top:17px;'>2:</div><div style='left:22px;top:17px;' class='err_msg'>Middle initial can only be a single uppercase alphabet.</div>
我在这上面花了很多时间。我喜欢滚动条,不要再放弃它。一旦我弄明白了这一点,我认为该功能集的其余部分将很容易使用。接下来的一个问题很可能与此无关,即当我“销毁”滚动条时,Div上的mCustomScrollbar方法仍然显示。这只是一个次要问题。。。我不是JS专家,但是当scroller文档声明元素恢复到调用前的状态时,我本以为这个方法会消失。对吧?


谢谢!我对这个论坛比较陌生。如果格式或详细信息措词不恰当,请原谅。

经过进一步的工作,发现它非常适合作为AJAX响应的纯文本,但不适合上面显示的HTML。我在这里缺少什么基本的东西吗?我应该转义HTML中的某些内容吗?要添加新标签吗?一个集装箱部门也试过了,我解决了这个问题。查看所生成内容中元素的定位方面很重要。在标准滚动条中可查看的内容在此滚动条中可能无法查看。我必须更改HTML标记。绝对定位是罪魁祸首,但在常规浏览器的默认滚动条中清晰地显示出来。
 (function($){
     $(window).load(function(){
        $("#xxxxxxxxscroll_div").mCustomScrollbar({
          theme:"dark",
          scrollButtons:{
            enable:true
          },
        updateOnContentResize:true
      });
    });
  })(jQuery);