Owl SliderがAJAXのレスポンス後に機能しない

Question

ここで、Ajaxによってデータが変更されるページがあります。id = "Products"ただし、ここではスライダが正しく動作しません。データが変更されたときスライダが機能しない。

コンソールでは、このエラーが発生しています。 Uncaught TypeError：$（...）。owlCarouselは関数ではありません

また、私はスライダーのCSSとjsをAjaxファイルに入れようとしました。しかし、まだ動作していません。 も多くのSOの質問に見えましたが、完璧な解決策は見つかりませんでした。 AJAX呼び出しのsuccess:機能で

<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

、あなたはフクロウスライダーを再初期化する必要があります。

success: function() { 

    //Add success code here 

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

これにより、Owl Sliderは変更されたデータからスライダを再生成します。

Answer 2

同様の質問on stackoverflow hereおよびhere。 カルーセルプラグイン（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> 

....キャッチされない例外TypeErrorこれは同じエラーを返しますあなたの成功の機能に

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

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