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>

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

我认为我需要重新实例化代码，但我不确定如何以及在何处执行此操作。我查看过这些文章How to reinitialize Owl Carousel after ajax call，Owl carousel not displayed和Call the plugin。我试图以多种方式实例化，但这对我来说有点陌生。

当元素直接添加到索引页

时，下面的实例化工作正常

$(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();
  });   
}

Owl Carousel无法通过AJAX / PHP调用正确创建

1 个答案: