使用 jquery 动态附加数据时“owl carousel”不起作用

Question

我将数据动态附加到“猫头鹰旋转木马”，最初数据显示正确，接下来（当我单击按钮时）我将擦除数据并将其重新分配给“猫头鹰旋转木马”（因为数据将保持更改）当时数据没有正确附加到“猫头鹰旋转木马”

div

，我也遵循了this文档。

图像示例

初始页面加载：-

单击索引按钮后：-

整个逻辑如下

使用链接是：-

<!-- 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,
        //autoplay: true,
        //autoplayTimeout: 8500,
        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);

        ////Refresh Owl Carousel after content change
        $('#indices_carousel_intraday').trigger('refresh.owl.carousel');
    }

Asp.net(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>

我不确定我在哪里犯了错误以及如何实现这个概念

建议我哪里出错了以及如何解决这个问题。

抱歉我的英语不好。

Answer 1

动态数据加载后必须调用

$('#indices_carousel_intraday').owlCarousel({

$(document).ready(function () {

IntradayPicksIndicesTab();
$('#indices_carousel_intraday').owlCarousel({
        items: 4,
        loop: false,
        //autoplay: true,
        //autoplayTimeout: 8500,
        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
            }
        }

    });
});


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