猫头鹰滑块在 AJAX 回复后不起作用

Question

在这里，我有一个页面，其中 Ajax 在 id="Products" 中的数据发生了变化，但这里的滑块无法正常工作。当数据更改时，滑块不起作用。

在控制台中，我收到此错误。未捕获的类型错误： $（...）。猫头鹰旋转木马不是一个功能

我也尝试将滑块 css 和 js 放在 Ajax 文件中。但仍然不起作用。也看了很多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:函数中，您必须重新初始化 Owl 滑块。

success: function() {
    //Add success code here
    $('.color-options').owlCarousel({
        loop:true,
        margin:10,
        nav:true,
        items:4
    })
}

这将强制 Owl 滑块从更改的数据重新生成滑块。

Answer 2

关于stackoverflow的类似问题在这里和这里。您确定您加载了轮播插件（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,
  });