在 python Django 中的 ajax 成功后，猫头鹰轮播不工作

Posted 2023-02-24

【中文标题】在 python Django 中的 ajax 成功后，猫头鹰轮播不工作

【英文标题】：owl Carousel is not working after ajax success in python Django

【发布时间】：2022-01-07 11:36:23

【问题描述】：

我想通过单击主类别的滑块列表来获取滑块上的父类别列表。单击主类别时，第二个类别的边栏不起作用。

$('.maincategory').owlCarousel( );

  $(".box").on("click", function()
     var value= this.id.toString();
     var csr =$("input[name=csrfmiddlewaretoken]").val();
     debugger
     $.ajax(
                 url: 'getParentCategory',
                 type: 'POST',
                 data: 
                 id: value,
                 csrfmiddlewaretoken: csr 
                    ,
                 success: function (response) 
                    data = response.results
                    AppendData(data);
                 
           );
     
   );
   
   function AppendData(data)
     $(".secondCategory").empty();
     debugger;
     var htmls = '';
     if(data.length != 0)
        for (var i = 0; i < data.length; i++) 
           htmls += '<div class="item eight-card-single text-center">'
              htmls += '<a id="value.id" class="second-category category">'
              htmls +='<img src="/media/uploads/products/logo.jpg">'  
              htmls +='<h5 id="'+ data[i].name +'" class="card-title">'+ data[i].name +'</h5>'
              htmls +='</a>'
              htmls +='</div>'
     
     $(".secondCategory").append(htmls);
        $('.secondCategory').owlCarousel(            
        );
      else 
        $(".secondCategory").append("No data");
        
     
     ;

【参考方案1】：

.empty() 方法会清除元素内容，但不会破坏该元素上现有的 Owl carousel 实例，您需要在设置新的 html 内容并创建新的 Owl carousel 实例之前使用 $(".secondCategory").trigger("destroy.owl.carousel") 进行此操作。