Javascript 如何在ajax调用后重新初始化Owl转盘?

Javascript 如何在ajax调用后重新初始化Owl转盘?,javascript,jquery,ajax,owl-carousel,Javascript,Jquery,Ajax,Owl Carousel,在一个成功的ajax调用之后,我正在尝试重新初始化owlcarousel。ajax调用将更改数据,但视图应保持不变。我遇到了视图(旋转木马结构)无法重新初始化的问题。页面加载后一切正常 我使用的是1.3.3版 $(document).ready(function() { $(".owl-carousel").owlCarousel({ items : 3 }); }); Ajax调用 $.ajax({ type: 'get', url: '/public/index'

在一个成功的ajax调用之后,我正在尝试重新初始化owlcarousel。ajax调用将更改数据,但视图应保持不变。我遇到了视图(旋转木马结构)无法重新初始化的问题。页面加载后一切正常

我使用的是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();
  }
}
这似乎有效,但想知道这是否是正确的方法吗?

这应该有帮助:

/*
 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
  });
})
尝试
$(窗口).load()
而不是
重新初始化

尝试它,它存在于:

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

下面的例子很有效

正在初始化旋转木马:

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

owl.owlCarousel({
  items: 10,
  autoPlay: 1000,
});
使用ajax回调时,请尝试:

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

owl.owlCarousel({
  items: 5,
  autoPlay: 1000,
});
我创建了一个提琴来解释如何重新初始化旋转木马:

PS:我没有创建一个选项数组,只是如果你想修改一些参数,如速度、显示项目的数量等


我希望它能有所帮助。

我也遇到了同样的问题,并尝试了
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 
        });
    }
});

在第2版中,这一个对我有效

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

这里是Owl转盘页面,可能会有所帮助-您是否尝试过使用addItem()或reinit(),谢谢链接..尝试使用他们的示例将某些内容组合在一起,但效果不太好Hanks,请原谅我在这里的愚蠢,但是如果我想创建一个在ajax成功回调中运行的函数,我将如何构造它?因为我真的看不出上面是如何工作的。我想我明白了,我会把我的例子上传到upMr。HiDeo这段代码在我的猫头鹰旋转木马中为我重新初始化。是否有一些代码需要重新初始化..我得到了这个错误Uncaught TypeError:无法像charm一样读取undefinedWorks的属性'reinit'!!除了猫头鹰转盘之外,这可能会产生连锁反应——许多东西都在监听可能没有意识到这种狭窄的ajax调用的负载。没错,只是一把巨大的大锤。
var owl = $('#owl-carousel');
owl.trigger('destroy.owl.carousel');
owl.owlCarousel({
   items: 1,
});