Как повторно инициализировать Сову Карусель после вызова ajax?

Question

Я пытаюсь повторно инициализировать сову карусели после успешного вызова ajax. Ajax-вызов изменит данные, но представление останется таким же. У меня проблема, когда структура карусели просмотра не будет повторно инициализироваться. Я не знаю, где я ошибся.

Ajax запрос

$(document).on('click', '.category_list', function() { 
    var category_id = $(this).attr('data-id'); 
    var _token = $('#_token').val(); 
    var param = 'category_id=' + category_id + '&_token=' + _token; 
    $.ajax({ 
     type: "POST", 
     datatype: "json", 
     url: "/master/sub_category", 
     data: param, 
     success: function(result) { 
      $('#test').html(result); 
      var owl = $(".owl-carousel"); 
      owl.owlCarousel({ 
       items: 4, 
       navigation: true 
      }); 
     } 
    });  
}); 

Контроллер Функция

public function getImg() { 
    $post_data = Request::all(); 
    $sub_img = $this->imgModel->getImgList($post_data); 
    $sub_img_html = ''; 
    foreach ($sub_img ['data'] as $data_img) { 
     $img = '/img/sub_category/'.$data_img ['img'];    
     $sub_img_html .= '<div class="item">'; 
     $sub_img_html .= '<img src="'.$img.'" />'; 
     $sub_img_html .= '</div>'; 
    } 
    echo $sub_img_html; 
} 

Посмотреть

<div id="demo"> 
    <div id="test" class="owl-carousel"> 
     <?php 
      if (!empty($img_category)) { 
       foreach ($img_category as $imgcategory){ 
     ?> 
     <div class="item"> 
      <img src='/img/sub_category/<?= imgcategory['subcategory_img'] ?>'/></div> 
     <?php 
      } 
     } 
    ?> 
    </div> 
</div> 

Answer 1

В соответствии с вашим кодом я вношу изменения, пожалуйста, примените это, я надеюсь, что этот код работает полностью.

success: function(result) {    
      $('#demo').html('<div id="testing" class="owl-carousel"></div>'); 
      for(var i=0;i<result.length;i++){ 
       $(".owl-carousel").append('<div class="item"><img src="/img/sub_category/'+result[i].subcategory_img+'" /></div>'); 
      }; 
      var owl = $("#testing"); 
      owl.owlCarousel({ 
       items: 4, 
       navigation: true 
      }); 

Answer 2

Я считаю, что вам нужно будет уничтожить и повторно инициализировать карусель. Существует метод уничтожения, который вы можете вызвать;

https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L1391

или существует способ обновления;

https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L608

или есть способ обновления;

https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L569

Я считаю, что все они могут называться;

$('.owl-gallery').owlCarousel('refresh'); 

Возможно стоит попробовать.