关于OWL-carousel插件在ajax调用后需要重新实例化问题(页面无轮播效果)

维护公司老项目，发现问题，记录一下~ 

1.产生原因

owl 已经实例已经存在,在ajax请求成功后并更改完页面数据后, 但是没有销毁之前实例,并重新生成新的实例,导致没有owl插件没有轮播效果.

2.解决方案

html：

<div class="owl-slider ps-carousel" data-owl-auto="true" data-owl-loop="true" data-owl-speed="7500" data-owl-gap="30"
    data-owl-nav="true" data-owl-item="3" data-owl-item-xs="1" data-owl-item-sm="2" data-owl-item-md="3"
    data-owl-item-lg="3" data-owl-duration="1000" data-owl-mousedrag="false" id="carousel-featured-properties">
    <div class="ps-project ps-project--grid">
        <div class="ps-project__thumbnail">
            <div class="ps-project__image"><img src="../img/property/1.jpg" alt="" id="img0" />div><a
                class="ps-project__overlay" id="detail0">a>
            <div class="ps-project__actions"><a href="javascript:void(0)" style="float: right"><i
                        class="lnil lnil-star-fill active">i>a>div>
        div>
        <div class="ps-project__content">
            <h4 class="ps-project__name"><a id="name0">房屋名称111a>h4>
            <p class="ps-project__address" id="address0">上海市,闵行区,浦秀路p>
            <p class="ps-project__price"><strong id="price0">¥2,0000/月strong>
            p>
            <div class="ps-project__meta">
                <figure>
                    <figcaption>房产经济人figcaption>
                    <p id="agent0">张三p>
                figure>
                <figure>
                    <figcaption>状态figcaption>
                    <p id="state0">出售p>
                figure>
                <figure>
                    <figcaption>时间figcaption>
                    <p id="build0">7/4/2021p>
                figure>
            div>
            <div class="ps-project__services">
                <p><span id="arce0"><i class="lnil lnil-size">i>250 ㎡span>p>
                <p><span id="bedroom0"><i class="lnil lnil-hospital-bed">i>3 卧室span>p>
                <p><span id="bathroom0"><i class="icon icon-bathtub">i>2 浴室span>p>
            div>
        div>
    div>
    <div class="ps-project ps-project--grid">
        //第二个
    div>
    <div class="ps-project ps-project--grid">
        //第三个
    div>
    <div class="ps-project ps-project--grid">
        //第四个
    div>
 
div>

js:

success: function (result) {
// alert("查找成功");
//console.log(result)
var allHouse = result.data;
$("#carousel-featured-properties").trigger("destroy.owl.carousel")
$("#carousel-featured-properties").html("");
 
// $("#testId").html('<div class="owl-slider ps-carousel" data-owl-auto="true" data-owl-loop="true"
    data-owl-speed="7500" data-owl-gap="30" data-owl-nav="true" data-owl-item="4" data-owl-item-xs="1"
    data-owl-item-sm="2" data-owl-item-md="3" data-owl-item-lg="3" data-owl-duration="1000" data-owl-mousedrag="false"
    id="carousel-featured-properties">div>');
$(allHouse).each(function (index,house1){
var house = house1.bHouse;
var image = house1.image;
var agents = house1.agents;
 
// 第二种写法,但是无轮播效果
var div = ' <div class="ps-project ps-project--grid">\n' +
    ' <div class="ps-project__thumbnail">\n' +
        ' <div class="ps-project__image"><img src="'+image[0].imageUrl+'" alt="" id="img0" />div><a
            class="ps-project__overlay" id="detail0">a>\n' +
        ' <div class="ps-project__actions"><a href="javascript:void(0)" style="float: right"><i
                    class="lnil lnil-star-fill active">i>a>div>\n' +
        ' div>\n' +
    ' <div class="ps-project__content">\n' +
        ' <h4 class="ps-project__name"><a id="name0">'+house.houseName+'a>h4>\n' +
        ' <p class="ps-project__address" id="address0">'+house.address+'p>\n' +
        ' p>\n' +
        ' <div class="ps-project__meta">\n' +
            ' <figure>\n' +
                ' <figcaption>房产经济人figcaption>\n' +
                ' <p id="agent0">'+agents.name+'p>\n' +
                ' figure>\n' +
            ' <figure>\n' +
                ' <figcaption>状态figcaption>\n' +
                ' <p id="state0">'+house.state+'p>\n' +
                ' figure>\n' +
            ' <figure>\n' +
                ' <figcaption>时间figcaption>\n' +
                ' <p id="build0">'+house.buildTime+'p>\n' +
                ' figure>\n' +
            ' div>\n' +
        ' <div class="ps-project__services">\n' +
            ' <p><span id="arce0"><i class="lnil lnil-size">i>'+house.area+' ㎡span>p>\n' +
            ' <p><span id="bedroom0"><i class="lnil lnil-hospital-bed">i>'+house.bedroom+' 卧室span>p>\n' +
            ' <p><span id="bathroom0"><i class="icon icon-bathtub">i>'+house.bathroom+' 浴室span>p>\n' +
            ' div>\n' +
        ' div>\n' +
    ' div>';
 
 
$(".owl-slider").append(div);
 
});
 
 
$(".owl-slider").owlCarousel({
items: 3
});
 
},
error: function (){
alert("查询失败");
}

重点:

 先销毁实例 再插入数据 再生成实例

//销毁实例代码
$("#carousel-featured-properties").trigger("destroy.owl.carousel")
//生成实例代码
$(".owl-slider").owlCarousel({});