关于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">房屋名称111</a></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/2021</p>
                                            </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({});