Ajax 调用未在第二次调用时初始化 owl 传送带？

Question

我试图在每次点击请求时将数据加载到 owl 轮播中。它在第一次调用时工作正常，但当我第二次调用时它扰乱了 owl 旋转木马结构并显示垂直堆叠的项目！

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代码：

$('.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 其中 ajax 数据为 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>

我正在使用owl轮播2.0版本

编辑：

我已经尝试过这些技巧，但 none 对我有用：

// 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

我已经为您创建了一个基于 Owl Carousel JSBIN SNIPPET 的演示。您应该能够从中获得帮助并将此代码用于您自己的目的。它涵盖了您正在尝试做的所有事情。这个问题很可能发生在你身上，因为你使用的是旧版本 Owl Carousel 很可能是 2.0，而最新版本是 2.3.4，所以很明显，将最新的文档方法应用于旧版本会导致在错误中.

JSBIN 代码段 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>

Ajax 调用未在第二次调用时初始化 owl 传送带？

Ajax call is not initializing owl carousel on second call?

javascript

jquery

owl-carousel