Ajax call is not initializing owl carousel on second call?

Question

I'm trying to load data into owl carousel on each click request. It works fine on first call but when i second call it disturbs the owl carousel structure and shows the items vertically stacked!

No errors in console, ajax is getting data successfully but owl carousel isn't initializing. Slider Works fine on first ajax call but it doesn't work on second third and so on

Js Code:

$('.ajax-cate').click(function(e){
            e.preventDefault();
            $(this).style="border-bottom:1px solid #197B81";
            var _loader = '<div class="ajax-loader"><img src="/images/ajax-loader.gif"></div>';
            $('#videoList').empty().html(_loader);
            var cate_slug = $(this).attr('data-slug');
            params.cate_slug = cate_slug;
            ajaxLoadVideo(params);
        });


function ajaxLoadVideo(params)
        {
            $('#categoryDataList').show();
            $('#blogIndex').hide();
            $('#videoList').removeClass('blog-slider');
            $.ajax({
                url: '/api/test',
                method: 'GET',
                data: params,
                dataType: 'json',
                success: function(res) {
                    $('#categoryDataList .group-heading h3 a').empty().html(res.category.name);
                    $('#categoryDataList .group-desc').empty().html(res.category.desc);
                    var _listHTML = '';
                    videos = res.videos;
                    for (i = 0; i < videos.length; i++) {
                        _listHTML += '<div class="blog-item">';
                        _listHTML += '<div class="blog-image">';
                        _listHTML += '<a href="/blog/' + videos[i].slug + '" title="' + videos[i].video_title + '">';
                        _listHTML += '<img alt="' + videos[i].video_title + '" src="/uploads/thumbnail/320_' + videos[i].video_picture + '">';
                        _listHTML += '</a>';
                        _listHTML += '</div>';
                        _listHTML += '<div class="caption">';
                        _listHTML += '<a class="blog-list-video-title" href="/blog/' + videos[i].slug + '" title="' + videos[i].video_title + '">' + videos[i].video_title;
                        _listHTML += '</a>';
                        _listHTML += '</div>';
                        _listHTML += '<div class="blog-metas">';
                        _listHTML += '<span class="blog-views">' + addCommas(videos[i].video_koview) + ' views</span>';
                        _listHTML += '</div>';
                        _listHTML += '</div>';
                    }

                    $('#videoList').empty().html(_listHTML);

                    var owl = $("#videoList");
                    owl.owlCarousel({
                        loop:false,
                        navRewind:false,
                        margin:10,
                        nav:true,
                        dots:false,
                        navText: '',
                        responsive:{
                            0:{
                                items:1
                            },
                            600:{
                                items:3
                            },
                            1000:{
                                items:5
                            }
                        }
                    });
                    $('#videoList').addClass('blog-slider');

                }
            });
        }

HTML:

<a class="ajax-cate" data-slug="most-popular" href="/test/category/most-popular" title="">
  Most Popular
</a>

HTML where ajax data is populated/inserted:

<div class="blog-category-items" id="categoryDataList" style="display: none;">
    <div class="container">
        <div class="blog-groups">
            <div class="group-heading">
                <h3><a></a></h3>
            </div>
            <p class="group-desc"></p>

            <div class="owl-lg-dot mb-none owl-theme owl-loaded" id="videoList"></div>
        </div>

    </div>
</div>

I'm using owl carousel 2.0 version

EDIT:

I already have tried these tricks but none works for me:

// destroy and init in success of ajax
    $('#videoList').trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
    $('#videoList').find('.owl-stage-outer').children().unwrap();
     $('#videoList').owlCarousel({
                    loop:false,
                    navRewind:false,
                    margin:10,
                    nav:true,
                    dots:false,
                    navText: '',
                    responsive:{
                        0:{
                            items:1
                        },
                        600:{
                            items:3
                        },
                        1000:{
                            items:5
                        }
                    }
                });

Answer 1

I have created a Demo based Owl Carousel JSBIN SNIPPET for you. You should be able to take help from it and use this code for your own purpose. It covers all what you are trying to do. The issue is most likely happening with you because you are using old version of Owl Carousel most likely 2.0 while the latest one is 2.3.4 so obviously by applying latest docs methods to the old version will result in errors.

JSBIN Snippet Link: https://output.jsbin.com/mamomofegu

$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    margin:10,
    nav:true
  });
});

var newWords = [
  'satellite', 
  'performer', 
  'pawn', 
  'waste', 
  'separation', 
  'curl', 
  'vigorous', 
  'debut', 
  'basis', 
  'doll'
];

var secondBatchWords = [
   'superintendent',
   'cafe',
   'teenager',
   'bubble',
   'guilt',
   'cattle',
   'brilliance',
   'budget',
   'kinship',
   'patch'
];

var checkWords = 0;
$('.loadMoreWords').on('click', function(){
  $('.initCarousel').click();
  for(i = 0; i < newWords.length; i++) {
    var checkWordExistence = $(`.block:contains('${newWords[i]}')`);
    if (checkWordExistence.length) {
      checkWords = 1;
    }
  }
  if (checkWords == 0) {
    var owl = $('.owl-carousel');
    for(i = 0; i < newWords.length; i++) {
      owl.trigger('add.owl.carousel', [`<div class="block">${newWords[i]}</div>`]).trigger('refresh.owl.carousel');
    }
  } else {
    alert('You have already loaded the new Items');
  }
});

var checkWordsForSecondBatch = 0;
$('.loadSecondBatchWords').on('click', function(){
    $('.initCarousel').click();
    for(i = 0; i < secondBatchWords.length; i++) {
      var checkWordExistence = $(`.block:contains('${secondBatchWords[i]}')`);
      if (checkWordExistence.length) {
        checkWordsForSecondBatch = 1;
      }
    }
    if (checkWordsForSecondBatch == 0) {
      var itemsLength = $('.owl-item').length;
      for(i = 0; i < itemsLength; i++) {
        $('.owl-carousel').trigger('remove.owl.carousel', [i]).trigger('refresh.owl.carousel');
      }
      for(i = 0; i < secondBatchWords.length; i++) {
        $('.owl-carousel').trigger('add.owl.carousel', [`<div class="block">${secondBatchWords[i]}</div>`]).trigger('refresh.owl.carousel');
      }
    } else {
      alert('You have already loaded the second batch words.');
    }
});

$('.destroyCarousel').on('click', function(){
   var owl = $('.owl-carousel');
   owl.trigger('destroy.owl.carousel');
});

$('.initCarousel').on('click', function(){
  $('.owl-carousel').owlCarousel({
    margin:10,
    nav:true
  });
});

.block {
  border: 1px solid green;
  margin-right:20px;
  padding:50px;
  color:white;
  background:black;
  text-align:center;
  font-size:30px;
  font-family:Arial;
}

.owl-nav {
  font-size: 80px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
</head>
<body>
<div class="owl-carousel owl-theme">
  <div class="block"> default </div>
  <div class="block"> hang </div>
  <div class="block"> reproduce </div>
  <div class="block"> shot </div>
  <div class="block"> flex </div>
</div>
  
  <button class="loadMoreWords">Load More Words</button>
  <button class="destroyCarousel">Destroy Carousel</button>
  <button class="initCarousel">Init Carousel</button>
  <button class="loadSecondBatchWords">Load Second Batch Words</button>
  
</body>
</html>