javascript 如何在 AJAX 调用后重新初始化猫头鹰旋转木马？

n3h0vuf2 于 2023-01-16 发布在 Java

关注(0)|答案(8)|浏览(127)

我试图在成功的ajax调用后重新初始化猫头鹰carousel。ajax调用将更改数据，但视图应该保持不变。我遇到了视图（carousel结构）不会重新初始化的问题。页面加载时一切正常。
我使用的是版本1.3.3

$(document).ready(function() {
 $(".owl-carousel").owlCarousel({
   items : 3
 });
});

Ajax调用

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
      success: function(data) {
       $(".owl-carousel").owlCarousel({
         items: 3
       });
      }
   });
}

我是否错过了一些我需要做的事情？我已经在Github页面上看过这个问题，并尝试了建议，但无济于事。

编辑

根据给出的建议，我创建了这两个函数

function owlCarousel() {
  var owl = $(".owl-carousel"); 
  //init carousel
  owl.owlCarousel();
    owl.data('owlCarousel').reinit({
     items : 3
    });
}

function destroyOwlCarousel() {
  var owl = $(".owl-carousel");
  //init carousel
  owl.owlCarousel();
    owl.data('owlCarousel').destroy();
  }
}

它似乎工作，但不知道这是否是正确的方式来做这件事？

JavaScript

来源：https://stackoverflow.com/questions/27802064/how-to-reinitialize-owl-carousel-after-an-ajax-call

8条答案

按热度按时间

iqxoj9l91#

$('#owl-demo').data('owlCarousel').reinit();

赞(0）回复(0）举报 2023-01-16

f4t66c6m2#

下面的例子很有效。
初始化转盘：

owl = $("#owl-demo");

owl.owlCarousel({
  items: 10,
  autoPlay: 1000,
});

当你使用ajax回调函数时，尝试一下：

owl.data('owlCarousel').destroy();

owl.owlCarousel({
  items: 5,
  autoPlay: 1000,
});

我创建一个小提琴来解释如何重新初始化carousel：http://jsfiddle.net/s10bgckL/959/
附言：我没有创建一个数组的选项，只是如果你想修改一些参数，如速度，显示项目的数量等。
希望能有所帮助。

赞(0）回复(0）举报 2023-01-16

wmtdaxz33#

这个在版本2中对我有效

var owl = $('#owl-carousel');
owl.trigger('destroy.owl.carousel');
owl.owlCarousel({
   items: 1,
});

赞(0）回复(0）举报 2023-01-16

qyswt5oh4#

这应有助于：

/*
 reinit() method reinitialize plugin 

 Syntax:
 owldata.reinit(newOptions)

 Yes! you can reinit plugin with new options. Old options
 will be overwritten if exist or added if new.

 You can easly add new content by ajax or change old options with reinit method.
 */

 $('.reinit').click(function(e){
 e.preventDefault()
 if(booleanValue === true){
  booleanValue = false;
  } else if(booleanValue === false){
  booleanValue = true;
}

owl.data('owlCarousel').reinit({
    singleItem : booleanValue
  });
})

赞(0）回复(0）举报 2023-01-16

um6iljoc5#

试试看，它存在于owl documention中：

//Initialize Plugin
    $(".owl-carousel").owlCarousel()

    //get carousel instance data and store it in variable owl
    var owl = $(".owl-carousel").data('owlCarousel');

    owl.reinit(options)

赞(0）回复(0）举报 2023-01-16

vpfxa7rd6#

我经历了同样的问题，并尝试了reinit()方法，但它对我不起作用，所以我再次尝试destroy和init，它起作用了。

$.ajax({
    type: 'get',
    url: '/api/v1/companies',
    ...,
    success: function(data) {
        $("#main-company-carousel").data('owlCarousel').destroy();
        $("#main-company-carousel").owlCarousel({
            items : 3 
        });
    }
});

赞(0）回复(0）举报 2023-01-16

j5fpnvbx7#

看看这个：

$.ajax({
            
            type: 'POST',
            url: '/wp-admin/admin-ajax.php',
            dataType: 'html',
            data: {
              category: catName,
            },    
            success: function(response) {
                    
                    $('.show_best_top_popular').html(response);
                    
                    var owl = $('.owl-carousal');
                    
                    owl.trigger('destroy.owl.carousel');
                    
                    owl.owlCarousel({
                        loop: true,
                        margin: 10,
                        nav: true,
                    });
                }
});

经过多次尝试，我做到了。谢谢。

赞(0）回复(0）举报 2023-01-16

monwx1rj8#

尝试使用$(window).load()而不是reinitialize

赞(0）回复(0）举报 2023-01-16