2013-10-16 29 views
0

我想从另一个页面加载内容并将其放置在div中,但mCustomScrollbar似乎并未将其内容包裹在其自定义滚动条内。 内容(图片)加载到div中,但显示在浏览器的默认长滚动条内 任何人都知道如何解决这个问题?mCustomScrollbar插件不能用于动态加载的内容

$('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> 

回答

3

我找到了解决我的问题通过将JavaScript代码名为“restart.html”所要求的文件中;和包装图像的DIV中类“内容”。有用 !

  <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>