Owl Carousel 未通过 AJAX/PHP 调用正确创建答案

【问题标题】：Owl Carousel not created properly through AJAX/PHP callOwl Carousel 未通过 AJAX/PHP 调用正确创建
【发布时间】：2015-08-06 21:16:02
【问题描述】：

我正在尝试将 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 运行后如何以及在何处重新实例化？

【问题讨论】：

在此行之后的 ajax 调用中执行 $('#ajaxResponse').html(data);
@user4621032 根据文档，我应该添加 $("#owl-example").owlCarousel();，但我使用的是什么元素？我试过 $("#ajaxResponse") 但不是这样
这些数据 id="owl-demo" class="owl-carousel"
@user4621032 太棒了！它不是 100% 存在，但现在有很多功能。你会发布一个答案，以便我可以信任你吗？完成所有工作后，我将使用完整的答案进行编辑。

标签： php jquery ajax owl-carousel

【解决方案1】：

您应该在 Ajax 调用中重新启动轮播（重新实例化）。之后，当新元素添加到页面时

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

【讨论】：