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

zbq4xfa0 于 2023-01-16 发布在 Java

关注(0)|答案(3)|浏览(128)

我使用的是猫头鹰转盘，当我直接加载项目时，它工作得很好。虽然，当我试图通过 AJAX 加载项目时，那些已经渲染但没有正确显示的项目，甚至导航也不工作。

JQuery初始化轮播

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

超文本标记语言....

<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

来源：https://stackoverflow.com/questions/46171134/owl-carousel-doesnt-work-properly-on-ajax-loaded-items

3条答案

按热度按时间

nwwlzxa71#

加载数据后，您需要初始化carousel：

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

赞(0）回复(0）举报 2023-01-16

x7yiwoj42#

在成功函数中添加carousel 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
                }
            }
        });
    }
});

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

赞(0）回复(0）举报 2023-01-16

fnx2tebb3#

试试这个，试了很多次我就能解出来了。

$.ajax({
            
            type: 'POST',
            url: '/wp-admin/admin-ajax.php',
            dataType: 'html',
            data: {
              category: catName,
            },    
            success: function(response) {
                    
                    $('.show_best_top_popular').html(response);
                    
                    var owl = $('.owl-carousal');
                    
                    owl.trigger('destroy.owl.carousel');
                    
                    owl.owlCarousel({
                        loop: true,
                        margin: 10,
                        nav: true,
                    });
                }
});

赞(0）回复(0）举报 2023-01-16

我来回答

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

3条答案

相关问题

热门标签

最新问答