没有通过AJAX/PHP调用正确创建Owl Carousel

Question

我正在尝试转换Owl Carousel来保存从数据库中提取的数据。使用按钮:

<button onclick="addCarousel('2015-06-11')">Test</button>

我调用一个AJAX函数(日期现在不重要):

function addCarousel(date){
  date = new Date(date);
  $.post("php/addCarousel.php", {date : date}, function(data){
    $('#ajaxResponse').html(data);
  });   
}:

使用PHP(现在是静态脚本)提取数据:

Echo
'<div id="owl-demo" class="owl-carousel">
    <div class="scrollDay"><h1>0</h1></div>
    <div class="scrollDay"><h1>1</h1></div>
    <div class="scrollDay"><h1>2</h1></div>
    <div class="scrollDay"><h1>3</h1></div>
    <div class="scrollDay"><h1>4</h1></div>
    <div class="scrollDay"><h1>5</h1></div>
    <div class="scrollDay"><h1>6</h1></div>
    <div class="scrollDay"><h1>7</h1></div>
    <div class="scrollDay"><h1>8</h1></div>
    <div class="scrollDay"><h1>9</h1></div>
    <div class="scrollDay"><h1>10</h1></div>
    <div class="scrollDay"><h1>11</h1></div>
    <div class="scrollDay"><h1>12</h1></div>
    <div class="scrollDay"><h1>13</h1></div>
    <div class="scrollDay"><h1>14</h1></div>
    <div class="scrollDay"><h1>15</h1></div>
</div>';

在我的索引页

<div id="ajaxResponse">
   Data will go here
</div>

如果我直接将元素插入索引页，那么carousel工作正常，但当我通过php生成它时，它不工作。我的开发人员工具显示这些元素存在于页面上，并且没有控制台错误，但是由于某些原因，这些元素没有显示出来。我手动为所有元素display: block;，但这不是问题。

我认为我需要重新实例化代码，但我不确定如何以及在哪里这样做。我研究了这些文章:如何在ajax调用后重新初始化Owl Carousel, Owl Carousel不显示，以及调用插件。我已经尝试用多种方式实例化，但这对我来说有点陌生。

当元素直接添加到索引页

时，下面的实例化工作得很好

$(document).ready(function() {
  var owl = $("#owl-demo"),
      status = $("#owlStatus");
  owl.owlCarousel({
    navigation : true,
    afterAction : afterAction
  });
  function updateResult(pos,value){
    status.find(pos).find(".result").text(value);
  }
  function afterAction(){
    updateResult(".owlItems", this.owl.owlItems.length);
    updateResult(".currentItem", this.owl.currentItem);
    updateResult(".prevItem", this.prevItem);
    updateResult(".visibleItems", this.owl.visibleItems);
    updateResult(".dragDirection", this.owl.dragDirection);
  }
});

PHP运行后我如何以及在哪里重新实例化?

Answer 1

您应该在Ajax调用中重新启动carousel(重新实例化)。之后，当新元素添加到页面

时

function addCarousel(date){
  date = new Date(date);
  $.post("php/addCarousel.php", {date : date}, function(data){
    $('#ajaxResponse').html(data);
    $("#owl-demo").owlCarousel();
  });   
}