Question

我正在使用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 欢迎任何帮助！

Answer 1

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

finished

Answer 2

在成功功能中添加轮播js ..

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

＆＃13;

owl carousel在装载ajax的物品上无法正常工作

2 个答案: