Question

我试图在每次单击请求时将数据加载到owl carousel中。第一次通话时效果很好，但是当我第二次通话时，它扰乱了猫头鹰轮播结构并显示了垂直堆叠的物品！

控制台中没有错误，ajax正在成功获取数据，但是猫头鹰轮播尚未初始化。 Slider在第一个Ajax调用上工作正常，但在第二个Ajax调用上无效，依此类推

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>

填充/插入ajax数据的HTML：

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

我正在使用猫头鹰传送带2.0版

编辑：

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

// 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，因此显然将最新的docs方法应用于旧版本会导致错误

JSBIN代码段链接：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调用是否在第二次调用时未初始化猫头鹰轮播？

1 个答案: