owl carousel 在 ajax 加载的项目上无法正常工作答案

【问题标题】：owl carousel doesn't work properly on ajax loaded itemsowl carousel 在 ajax 加载的项目上无法正常工作
【发布时间】：2017-09-12 08:07:54
【问题描述】：

我正在使用 owl-carousel，当我直接加载项目时它工作得非常好。虽然，当我尝试通过 AJAX 加载项目时，这些项目已呈现但未正确显示，甚至导航都不起作用。

JQuery 初始化轮播

    $(".pos-carousel").owlCarousel({
    center: true,
    items: 1,
    loop: true,
    margin: 15,
    nav: true,
    responsive: {
        640: {
            items: 2,
            autoWidth: true,
            margin: 30
        }
    }
});

HTML....

<div id="creationSelectItem">
<div class="module-content carousel owl-carousel owl-theme pos-carousel creationSelectItem-carousel">
</div>

加载项目的 JQuery

    $(".brand-selection-item img").click(function () {
    var selectedBrand = $(this).attr('data-selected-Brand');

    $.get("/umbraco/surface/POSCreate/GetTypeStyleOptions", { brandName: selectedBrand }, function (data) {
        $(".creationSelectItem-carousel").html(data);
    });
});

我在控制台上得到这个日志： error log 欢迎任何帮助！

【问题讨论】：

标签： javascript jquery ajax owl-carousel

【解决方案1】：

加载数据后需要初始化轮播：

$.get("/umbraco/surface/POSCreate/GetTypeStyleOptions", { brandName: selectedBrand }, function (data) {
     $(".creationSelectItem-carousel").html(data);
     $(".pos-carousel").owlCarousel({
        center: true,
        items: 1,
        loop: true,
        margin: 15,
        nav: true,
        responsive: {
           640: {
              items: 2,
              autoWidth: true,
              margin: 30
           }
       }
    });
});

【讨论】：

谢谢。它似乎有效，但仅适用于第一次通话。如果我单击另一个元素，则 ajax 调用有效，但 ow-lcarousel 不会重新初始化。

【解决方案2】：

在成功函数中添加轮播js..

jQuery.ajax({
    type: "POST",
    url: "file.php",
    cache: false,
    beforeSend: function() {
        //add loader before send
    },
    success: function(html) {
        //owl carosel slider js here
        jQuery(".creationSelectItem-carousel").html(html);
        jQuery(".pos-carousel").owlCarousel({
            center: true,
            items: 1,
            loop: true,
            margin: 15,
            nav: true,
            responsive: {
                640: {
                    items: 2,
                    autoWidth: true,
                    margin: 30
                }
            }
        });
    }
});

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：