Jquery AJAX响应后Owl滑块不工作

在这里，我有一个页面，其中id=“Products”中的数据是通过Ajax更改的，但这里的滑块不能正常工作。数据更改时，滑块不工作

<!-- 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:$（…）。owlCarousel不是函数

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

我还尝试将滑块css和js放在Ajax文件中。但仍然不起作用。 也看了这么多问题，但没有找到任何完美的解决方案

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

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

$（'.color options'）.owlCarousel({
循环：对，
差额：10，
导航：是的，
项目：4，
})

在AJAX调用的

成功：

函数中，您必须重新初始化Owl滑块

success: function() {

    //Add success code here

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

<!-- 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 Slider根据更改的数据重新生成滑块。

有关stackoverflow和的类似问题。

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

你确定你加载了旋转木马插件（js文件）？。 尝试将其移动到jquery库之后的脚本顶部。

<!-- 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:$（…）。owlCarousel不是一个函数。当内容是动态的时，似乎owlsloider会混淆。尝试在运行时动态修改滑块dom（而不是使用ajax），并尝试初始化滑块。在我看来，这个问题与Ajax无关，它已经包含了所有需要的js和css，并且可以完美地默认工作。但是，当数据被AJAX更改时，会遇到问题@阳光奇迪