使用jQuery动态追加数据时Owl Carousel显示异常的问题排查

数据老陈

2026-6-26

动态更新Owl Carousel内容后无法正常显示的问题排查与解决

初始加载时Owl Carousel动态追加的数据显示正常，但点击按钮清空并重新赋值后，数据无法正常渲染。已尝试调用refresh.owl.carousel事件，但问题依旧。

问题截图

初始加载正常：
点击Indices按钮后异常：

完整实现代码

引用资源

<!-- Owl Carousel CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Owl Carousel JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

jQuery逻辑

$(document).ready(function () {
   
 $('#indices_carousel_intraday').owlCarousel({
        items: 4,
        loop: false,
        margin: 12,
        nav: false,
        dots: true,
        navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
        responsive: {
            0: { items: 1 },
            768: { items: 3 },
            1170: { items: 3 },
            1440: { items: 4 }
        }
    });

IntradayPicksIndicesTab();
});


function IntradayPicksIndicesTab() {
    var i_ind_data = "";

    $("#indices_carousel_intraday").empty();
    for (var i = 0; i < 4; i++) {
        i_ind_data += `<div class="card h-100 lavenderBG border-0 radius24">
                            <div class="card-body p-md-4 p-3">
                                <small class="px-2 py-0 greenLightBG rounded">BUY</small>
                                <div class="row align-items-center mt-0 mb-1 mb-md-0 ">
                                    <div class="col-12 col-md-9 cardTitle">BANKNIFTY23NOVFUT</div>
                                    <div class="col-12 col-md-3 text-right mt-2 mt-md-0">
                                        <input type="submit" value="Trade" class="btn btn-success btn-sm w-100 w-md-auto">
                                    </div>
                                </div>
                                <small>11:00:25</small>
                                <div class="row align-items-center my-2 justify-content-around">
                                    <div class="col-md-3 col-4 d-flex">
                                        <small class="texGrayDark me-1">Entry:</small>
                                        <span>100.25</span>
                                    </div>
                                    <div class="col-md-3 col-4 d-flex">
                                        <small class="texGrayDark me-1">LTP:</small>
                                        <span class="textSuccess">105.25</span>
                                    </div>
                                </div>

                                <div class="row align-items-center my-3 ">
                                    <div class="col-md-3 col-4 d-flex flex-column">
                                        <small class="texGrayDark">Qty</small>
                                        <span>15</span>
                                    </div>
                                    <div class="col-md-3 col-4 d-flex flex-column">
                                        <small class="texGrayDark">TPL</small>
                                        <span class="textBlue">798</span>
                                    </div>
                                    <div class="col-md-3 col-4 d-flex flex-column">
                                        <small class="texGrayDark">Inv.</small>
                                        <span>96687</span>
                                    </div>
                                    <div class="col-md-3 col-12 d-md-flex flex-md-column">
                                        <small class="texGrayDark">Status</small>
                                        <span>Auto Close</span>
                                    </div>
                                </div>

                                <div class="row align-items-center ">
                                    <div class="col-12 mt-0">
                                        <small class="d-flex justify-content-between py-1 px-2 bg-white rounded">
                                            <div>Target: 1000.56</div>
                                            <div>Stop Loss: 250.69</div>
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>`;
    }

    $("#indices_carousel_intraday").append(i_ind_data);
    $('#indices_carousel_intraday').trigger('refresh.owl.carousel');
}

HTML代码

<a href="javascript://" class="nav-link active" id="nav_indices_tab" onclick="IntradayPicksIndicesTab();" data-bs-toggle="tab" data-bs-target="#indices" type="button">Indices</a>

<div class="tab-pane fade active show" id="indices">
 <div class="owl-carousel mt-3" id="indices_carousel_intraday">
  <!-- dynamic data will append here -->
 </div>
</div>

错误原因分析

直接调用empty()清空Owl Carousel容器会破坏轮播初始化后生成的核心结构（如.owl-stage、.owl-item等），这些结构是Owl Carousel管理轮播项的基础。仅触发refresh事件无法恢复被破坏的结构，导致新添加的内容无法被正确识别和渲染。

解决方法

正确流程应为：销毁现有轮播实例 → 清空并追加新内容 → 重新初始化轮播。修改后的IntradayPicksIndicesTab函数如下：

function IntradayPicksIndicesTab() {
    var i_ind_data = "";
    var $carousel = $('#indices_carousel_intraday');

    // 销毁已存在的轮播实例
    if ($carousel.data('owl.carousel')) {
        $carousel.trigger('destroy.owl.carousel');
    }

    // 清空容器并生成新内容
    $carousel.empty();
    for (var i = 0; i < 4; i++) {
        i_ind_data += `<div class="card h-100 lavenderBG border-0 radius24">
                            <!-- 卡片内容保持不变 -->
                            <div class="card-body p-md-4 p-3">
                                <small class="px-2 py-0 greenLightBG rounded">BUY</small>
                                <div class="row align-items-center mt-0 mb-1 mb-md-0 ">
                                    <div class="col-12 col-md-9 cardTitle">BANKNIFTY23NOVFUT</div>
                                    <div class="col-12 col-md-3 text-right mt-2 mt-md-0">
                                        <input type="submit" value="Trade" class="btn btn-success btn-sm w-100 w-md-auto">
                                    </div>
                                </div>
                                <small>11:00:25</small>
                                <div class="row align-items-center my-2 justify-content-around">
                                    <div class="col-md-3 col-4 d-flex">
                                        <small class="texGrayDark me-1">Entry:</small>
                                        <span>100.25</span>
                                    </div>
                                    <div class="col-md-3 col-4 d-flex">
                                        <small class="texGrayDark me-1">LTP:</small>
                                        <span class="textSuccess">105.25</span>
                                    </div>
                                </div>

                                <div class="row align-items-center my-3 ">
                                    <div class="col-md-3 col-4 d-flex flex-column">
                                        <small class="texGrayDark">Qty</small>
                                        <span>15</span>
                                    </div>
                                    <div class="col-md-3 col-4 d-flex flex-column">
                                        <small class="texGrayDark">TPL</small>
                                        <span class="textBlue">798</span>
                                    </div>
                                    <div class="col-md-3 col-4 d-flex flex-column">
                                        <small class="texGrayDark">Inv.</small>
                                        <span>96687</span>
                                    </div>
                                    <div class="col-md-3 col-12 d-md-flex flex-md-column">
                                        <small class="texGrayDark">Status</small>
                                        <span>Auto Close</span>
                                    </div>
                                </div>

                                <div class="row align-items-center ">
                                    <div class="col-12 mt-0">
                                        <small class="d-flex justify-content-between py-1 px-2 bg-white rounded">
                                            <div>Target: 1000.56</div>
                                            <div>Stop Loss: 250.69</div>
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>`;
    }
    $carousel.append(i_ind_data);

    // 重新初始化轮播
    $carousel.owlCarousel({
        items: 4,
        loop: false,
        margin: 12,
        nav: false,
        dots: true,
        navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
        responsive: {
            0: { items: 1 },
            768: { items: 3 },
            1170: { items: 3 },
            1440: { items: 4 }
        }
    });
}

补充说明

如果是单条添加/删除轮播项的场景，可以使用Owl Carousel提供的add.owl.carousel和remove.owl.carousel方法；但对于批量替换内容的场景，销毁重建的方式更直接且不易出错。

内容的提问来源于stack exchange，提问作者ashok

使用jQuery动态追加数据时Owl Carousel显示异常的问题排查

问题截图 #

完整实现代码 #

引用资源 #

jQuery逻辑 #

HTML代码 #

错误原因分析 #

解决方法 #

补充说明 #