Owl 轮播未通过 AJAX/PHP 调用正确创建

Question

我正在尝试转换 Owl 传送带以保存从数据库中提取的数据。使用按钮：

<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, and 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 调用中重新启动轮播（重新实例化）。之后，当新元素添加到页面时

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

Owl 轮播未通过 AJAX/PHP 调用正确创建

Owl Carousel not created properly through AJAX/PHP call

php

ajax

jquery

owl-carousel