Owl Carousel не работает после успеха ajax в python Django
Я хочу получить список родительских категорий на слайдере, щелкнув по списку слайдера главной категории. слайдер второй категории не работает, когда я щелкаю по главной категории.
$('.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");
}
};
Метод .empty()
очищает содержимое элемента, но не уничтожает существующий экземпляр карусели Owl на этом элементе, вам нужно сделать это с помощью $(".secondCategory").trigger("destroy.owl.carousel")
перед установкой нового html-содержимого и созданием нового экземпляра карусели Owl.