mCustomScrollbar 插件不适用于动态加载的内容答案

【问题标题】：mCustomScrollbar plugin not working with dynamic loaded contentmCustomScrollbar 插件不适用于动态加载的内容
【发布时间】：2013-10-16 09:05:50
【问题描述】：

我正在尝试从另一个页面加载内容并将其放置在 div 中，但 mCustomScrollbar 似乎没有将内容包装在其自定义滚动条中。内容（图像）加载在 div 内，但显示在浏览器的默认长滚动条内有人知道如何解决这个问题吗？

$('ul li a.collections').click(function(){
    $(".content").html('');
    $(".content").load("restart.html",function(){
        $(".content").mCustomScrollbar({horizontalScroll:true,theme:"dark"});   
    });
});

加载的html页面：

<div class="content">
    <div style="width:7600px;" >
        <a href="creative-destructon-womenswear-2009/1.jpg"><img src="creative-destructon-womenswear-2009/1.jpg" width="602" height="400"></a>
        <a href="creative-destructon-womenswear-2009/2.jpg"><img src="creative-destructon-womenswear-2009/2.jpg" width="284" height="400"></a>
        <a href="creative-destructon-womenswear-2009/3.jpg"><img src="creative-destructon-womenswear-2009/3.jpg" width="600" height="256"></a>
        <a href="creative-destructon-womenswear-2009/4.jpg"><img src="creative-destructon-womenswear-2009/4.jpg" width="283" height="400"></a>
        <a href="creative-destructon-womenswear-2009/5.jpg"><img src="creative-destructon-womenswear-2009/5.jpg" width="602" height="400"></a>
        <a href="creative-destructon-womenswear-2009/6.jpg"><img src="creative-destructon-womenswear-2009/6.jpg" width="1260" height="400"></a>
        <a href="creative-destructon-womenswear-2009/7.jpg"><img src="creative-destructon-womenswear-2009/7.jpg" width="332" height="400"></a>
        <a href="creative-destructon-womenswear-2009/8.jpg"><img src="creative-destructon-womenswear-2009/8.jpg" width="287" height="400"></a>
        <a href="creative-destructon-womenswear-2009/9.jpg"><img src="creative-destructon-womenswear-2009/9.jpg" width="316" height="400"></a>
        <a href="creative-destructon-womenswear-2009/10.jpg"><img src="creative-destructon-womenswear-2009/10.jpg" width="800" height="400"></a>
        <a href="creative-destructon-womenswear-2009/11.jpg"><img src="creative-destructon-womenswear-2009/11.jpg" width="283" height="400"></a>
        <a href="creative-destructon-womenswear-2009/12.jpg"><img src="creative-destructon-womenswear-2009/12.jpg" width="800" height="400"></a>
        <a href="creative-destructon-womenswear-2009/13.jpg"><img src="creative-destructon-womenswear-2009/13.jpg" width="564" height="400"></a>
        <a href="creative-destructon-womenswear-2009/14.jpg"><img src="creative-destructon-womenswear-2009/14.jpg" width="114" height="400"></a>
        <a href="creative-destructon-womenswear-2009/15.jpg"><img src="creative-destructon-womenswear-2009/15.jpg" width="266" height="400"></a>
    </div>
</div>

【问题讨论】：

标签： jquery html

【解决方案1】：

我通过将 javascript 代码放在名为“restart.html”的请求文件中并将图像包装在 div 类“content”中找到了解决问题的方法。它有效！

            <div class="content">
            <div style="width:7600px;" >
       <a href="creative-destructon-womenswear-2009/1.jpg"><img src="creative-destructon-womenswear-2009/1.jpg" width="602" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/2.jpg"><img src="creative-destructon-womenswear-2009/2.jpg" width="284" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/3.jpg"><img src="creative-destructon-womenswear-2009/3.jpg" width="600" height="256">
       </a>
       <a href="creative-destructon-womenswear-2009/4.jpg"><img src="creative-destructon-womenswear-2009/4.jpg" width="283" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/5.jpg"><img src="creative-destructon-womenswear-2009/5.jpg" width="602" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/6.jpg"><img src="creative-destructon-womenswear-2009/6.jpg" width="1260" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/7.jpg"><img src="creative-destructon-womenswear-2009/7.jpg" width="332" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/8.jpg"><img src="creative-destructon-womenswear-2009/8.jpg" width="287" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/9.jpg"><img src="creative-destructon-womenswear-2009/9.jpg" width="316" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/10.jpg"><img src="creative-destructon-womenswear-2009/10.jpg" width="800" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/11.jpg"><img src="creative-destructon-womenswear-2009/11.jpg" width="283" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/12.jpg"><img src="creative-destructon-womenswear-2009/12.jpg" width="800" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/13.jpg"><img src="creative-destructon-womenswear-2009/13.jpg" width="564" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/14.jpg"><img src="creative-destructon-womenswear-2009/14.jpg" width="114" height="400">
       </a>
       <a href="creative-destructon-womenswear-2009/15.jpg"><img src="creative-destructon-womenswear-2009/15.jpg" width="266" height="400">
       </a>
       </div>
       </div>
       <script type="text/javascript">
    (function($){
                    $(".content").mCustomScrollbar({horizontalScroll:true,theme:"dark"});   
                    })(jQuery);
    </script>

【讨论】：