I want to get the parent category list on the slider by clicking the main category's slider list. the second category's sider is not working when I click the main category.

$('.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 >'
              htmls  = '<a id="{{value.id}}" >'
              htmls  ='<img src="/media/uploads/products/logo.jpg">'  
              htmls  ='<h5 id="'  data[i].name  '" >'  data[i].name  '</h5>'
              htmls  ='</a>'
              htmls  ='</div>'
     }
     $(".secondCategory").append(htmls);
        $('.secondCategory').owlCarousel({            
        });
     } else {
        $(".secondCategory").append("No data");
        
     }
     };

CodePudding user response：

The .empty() method clears element content but doesn't destroy the existing Owl carousel instance on that element, you need to this with $(".secondCategory").trigger("destroy.owl.carousel") before setting the new html content and creating a new Owl carousel instance.