貓頭鷹滑塊不工作後，AJAX Resposse

Question

在這裏，我有一個頁面，其中數據由Ajax更改id =「Products」，但這裏滑塊不能正常工作。數據更改時滑塊不工作。

在控制檯中，我得到這個錯誤。遺漏的類型錯誤：$（...）owlCarousel不是一個函數

此外，我試圖把滑塊CSS和JS在阿賈克斯文件。但仍然沒有工作。 也看了很多SO問題，但沒有找到任何完美的解決方案。

<div id="products"> 
     <div class="owl-carousel color-options"> 
      <div><a href="javascript:void(0);" data-full="image/2.png"><img src="image/1.png"></a></div> 
      <div><a href="javascript:void(0);" data-full="image/2.png"><img src="image/2.png"></a></div> 
      <div><a href="javascript:void(0);" data-full="image/2.png"><img src="image/3.png"></a></div> 
      <div><a href="javascript:void(0);" data-full="image/2.png"><img src="image/4.png"></a></div> 
      <div><a href="javascript:void(0);" data-full="image/2.png"><img src="image/5.png"></a></div> 
      <div><a href="javascript:void(0);" data-full="image/2.png"><img src="image/1.png"></a></div> 
      <div><a href="javascript:void(0);" data-full="image/2.png"><img src="image/2.png"></a></div> 
      <div><a href="javascript:void(0);" data-full="image/2.png"><img src="image/3.png"></a></div> 
      <div><a href="javascript:void(0);" data-full="image/2.png"><img src="image/4.png"></a></div> 
      <div><a href="javascript:void(0);" data-full="image/2.png"><img src="image/5.png"></a></div> 
     </div> 
    </div> 
</div> 


<script> 
$('.color-options').owlCarousel({ 
     loop:true, 
     margin:10, 
     nav:true, 
     items:4, 
    }) 
</script> 

Answer 1

在AJAX調用的success:功能，你必須重新初始化貓頭鷹滑塊。

success: function() { 

    //Add success code here 

    $('.color-options').owlCarousel({ 
     loop:true, 
     margin:10, 
     nav:true, 
     items:4 
    }) 
} 

這會強制貓頭鷹滑塊從更改的數據重新生成滑塊。

Answer 2

stackoverflow的相似問題here和here。 你確定你已經加載了carousel插件（js文件）嗎？ 嘗試將它移到jquery lib之後的腳本頂部。

<!-- Include js plugin --> 
<script src="assets/owl-carousel/owl.carousel.js"></script> 
<script> 
$('.color-options').owlCarousel({ 
    loop:true, 
    margin:10, 
    nav:true, 
    items:4, 
}) 
</script> 

嘗試破壞並重新初始化你的旋轉木馬在你的成功的功能

owl = $('.color-options'); 

owl.data('owlCarousel').destroy(); 
    owl.owlCarousel({ 
    loop:true, 
    margin:10, 
    nav:true, 
    items:4, 
    });