javascript - owl carousel 在 ajax 加载的项目上不能正常工作

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

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

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