Wie Owl Carousel nach Ajax-Aufruf neu initialisieren?

Question

Ich versuche Eulenkarussell nach einem erfolgreichen Ajax-Aufruf neu zu initialisieren. Der Ajax-Aufruf wird die Daten ändern, aber die Ansicht sollte gleich bleiben. Ich habe ein Problem, bei dem die View-Karussell-Struktur nicht reinitialisiert wird. Ich weiß nicht, wo ich Fehler gemacht habe.

Ajax Anfrage

$(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 
      }); 
     } 
    });  
}); 

Regler Funktion

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; 
} 

Ansicht

<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

Gemäß Ihrem Code mache ich Änderungen, bitte wenden Sie diese an Ich hoffe, dieser Code funktioniert voll.

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

Ich glaube, Sie müssen zerstören und neu zu initialisieren, das Karussell. Es gibt eine Zerstörungsmethode, die du aufrufen kannst;

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

oder es gibt eine Refresh-Methode;

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

, oder es ist ein Update-Methode;

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

Ich glaube, diese alle genannt werden können;

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

Vielleicht einen Versuch wert.