2013-10-16 34 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>