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

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

1.产生原因

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

2.解决方案

html：

    

        

            

            

        
        

            
房屋名称111
            
上海市,闵行区,浦秀路
            
¥2,0000/月
            
            

                

                    
房产经济人
                    
张三
                
                

                    
状态
                    
出售
                
                

                    
时间
                    
7/4/2021
                
            
            

                
250 ㎡
                
3 卧室
                
2 浴室
            
        
    
    

        //第二个
    
    

        //第三个
    
    

        //第四个
    

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('
');
$(allHouse).each(function (index,house1){
var house = house1.bHouse;
var image = house1.image;
var agents = house1.agents;

// 第二种写法,但是无轮播效果
var div = ' 
\n' +
    ' 
\n' +
        ' 
\n' +
        ' 
\n' +
        ' 
\n' +
    ' 
\n' +
        ' 
'+house.houseName+'
\n' +
        ' 
'+house.address+'
\n' +
        ' 
\n' +
        ' 
\n' +
            ' 
\n' +
                ' 
房产经济人
\n' +
                ' 
'+agents.name+'
\n' +
                ' 
\n' +
            ' 
\n' +
                ' 
状态
\n' +
                ' 
'+house.state+'
\n' +
                ' 
\n' +
            ' 
\n' +
                ' 
时间
\n' +
                ' 
'+house.buildTime+'
\n' +
                ' 
\n' +
            ' 
\n' +
        ' 
\n' +
            ' 
'+house.area+' ㎡
\n' +
            ' 
'+house.bedroom+' 卧室
\n' +
            ' 
'+house.bathroom+' 浴室
\n' +
            ' 
\n' +
        ' 
\n' +
    ' 
';


$(".owl-slider").append(div);

});


$(".owl-slider").owlCarousel({
items: 3
});

},
error: function (){
alert("查询失败");
}

重点:

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

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