javascript - 修复灰显的 .owl-carousel div

Question

我正在调用以通过 AJAX 获取页面 ( getresult.php )。

我的索引中的 ID div:

<div id="pagination">
  <input type="hidden" name="rowcount" id="rowcount" />
</div>

我的页脚:

<script>
  getresult("getresult.php");
</script>

页脚调用getresult的脚本:

<script>
  function getresult(url) {
    $.ajax({
      url: url,
      type: "GET",
      data: {
        rowcount: $("#rowcount").val()
      },
      success: function(data) {
        $("#pagination").html(data);
      },
      error: function() {}
    });
  }
</script>

现在这是我的页面 getresult:

<div class="blog-posts">
  <article class="post post-medium">
    <div class="row">
      <div class="col-md-5">
        <div class="post-image">
          <div class="owl-carousel" data-plugin-options='{"items":1}'>
            <div>
              <div class="img-thumbnail">
                <img class="img-responsive" src="./img/blog/blog-image-2.jpg" alt="">
              </div>
            </div>
            <div>
              <div class="img-thumbnail">
                <img class="img-responsive" src="./img/blog/blog-image-1.jpg" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-7">
        <div class="post-content">
          <h2><a href="blog-post.html">Class aptent taciti sociosqu ad litora torquent</a></h2>
          <p>Euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla nunc dui, tristique in semper vel, congue sed ligula. Nam dolor ligula, faucibus id sodales in, auctor fringilla libero. Pellentesque pellentesque tempor tellus eget hendrerit. Morbi id aliquam ligula. Aliquam id dui sem. Proin rhoncus consequat nisl, eu ornare mauris tincidunt vitae. [...]</p>
        </div>
      </div>
    </div>
  </article>
</div>

我的问题是轮播类不起作用。当我删除类(class) owl-carousel 时，我可以看到图片。我的 index.php 中有 CSS 和 JS owl-carousel。当我在 Firebug 中看到 HTML 时，我看到了这一行 <div class="owl-carousel" data-plugin-options='{"items":1}'>变灰。

Answer 1

终于找到了。

我忘记把它放在我的 getresult.php 中

<script>
    $(document).ready(function() {

      $(".owl-carousel").owlCarousel({

          navigation : false, // Show next and prev buttons
          slideSpeed : 300,
          paginationSpeed : 400,
          singleItem:true

          // "singleItem:true" is a shortcut for:
          // items : 1, 
          // itemsDesktop : false,
          // itemsDesktopSmall : false,
          // itemsTablet: false,
          // itemsMobile : false

      });

    });

    </script>