当使用ajax、jquery动态追加owl carousel项时，这些项不起作用

Question

当使用ajax动态追加时，owl轮播项目无法工作，下面的jquery是我的ajax code..any帮助，我将非常感谢。

提前感谢

 $.ajax({
                type: "POST",
                url: "urllinks",
                data: 'id='+id,
                dataType: 'json',
                cache: false,
                success: function(data) {
                var locationoffers='';
                locationoffers+='<div id="owl-demo" class="owl-carousel">';
                $.each(data, function(i, item) {
                    locationoffers+='<div class="item"><a href="#" class="thumbnail"><img src="<?php echo base_url(); ?>assets/uploads/location_offers/'+data[i].image+'"  alt="Location Logo" /></a><span class="tocenter"> <h3>'+data[i].tittle+'</h3></span></div><div class="desc"><span> <p>'+data[i].message+'</p> </span></div><br><div class="tocenter"><a href="http://www.google.com" target="_blank" class="btn green">Grabit</a></div> </div>';
                });

            locationoffers+='</div>';

               $('#display_adds').html(locationoffers);
              $('.owl-carousel').owlCarousel();


        }


   });

     }   

This is the error output iam getting

Answer 1

在ajax调用之后显示owl carousel时，需要在收到响应后对其进行初始化，因此请尝试将carousel放入函数中

  function init_carousel() {
     $('.owl-carousel').owlCarousel();
  }; 

并在ajax响应成功时调用该函数来刷新轮播。同时，为了让它在页面加载时初始化，需要调用下面的函数：

jQuery(document).ready(function() {
   init_carousel();
});

Answer 2

除了上面的答案之外，尝试使用owlCarousel属性来控制行为，如下所示：

$('.searchPageGallery').owlCarousel({
        margin:0,
        nav:true,
        loop:true,
        stagePadding:0,
        center:true,
        dots:false,
        lazyLoad:true,
        items:1,
        responsiveClass:true,
        responsive:{
            0:{
                items:1,
                nav:true,
                dots:false
            },
            1025:{
                items:1,
                nav:true,
                dots:false
            },
            1200:{
                items:1,
                nav:true,
                nav:true
            }
        }
    });