當從Laravel控制器呼叫html時，owlcarousal被破壞

當我將 HTML 放入 laravel 視圖刀片時，owl carousal 效果很好：

但是當我嘗試進行 ajax 呼叫（通過 json 回應，從控制器獲取 HTML）時，它壞了：

我來自刀片的代碼：（通過 ajax 呼叫在 searchResult id 中獲取資料）

        <div class="owl-carousel bootcamp-slider" id="searchResult">

        </div>
        <div class="bootcamp-slider-btn owl-controls">
            <div class="owl-nav">
                <div class="owl-prev"><i class="fa fa-angle-left" aria-hidden="true"></i> 
               </div>
                <div class="owl-next"><i class="fa fa-angle-right" aria-hidden="true"></i> 
                </div>
            </div>
            <div class="owl-dots">
                <div class="owl-dot active"><span></span></div>
                <div class="owl-dot"><span></span></div>
                <div class="owl-dot"><span></span></div>
            </div>
        </div>
    </div>

來自控制器的代碼：

foreach($data as $bootcamp){
               $output .= '
                    <div class="bootcamp-card">
                        <div class="row">
                            <div class="col-12 col-md-12 bootcamp-body">
                                <div class="bootcamp-thumbnail">
                                    <img style="width:100%!important;height:100%!important"
                                         src="img/cart/course-thumb.png" alt="">
                                </div>

                                ....
                                ....
                                ....
                                <div class="p-0 pt-2 d-flex">
                                    <a href="#" class="form-control book-button" style="text- 
                               align: center;"
                                       data-toggle="modal"
                                       data-target="#bootcamp-registration">Book now</a>
                                    <a href="cart" class="add-to-cart">Add to cart</a>
                                </div>
                            </div>
                        </div>
                    </div>
               ';
           }
        }else{
             $output .= '
                 <div>No Bootcamp found</div>
             ';
        }

        $data = array(
            'searched_bootcamp' => $output
        );

        echo json_encode($data);

請檢查 jquery 中的代碼，我正在嘗試盡可能地減少代碼：

$('select').on('change',function(e){
            e.preventDefault();

            let by_month= $('#by-month').val();
            let by_course = $('#by-course').val();

            searchBootcamp(by_month, by_course);
        })

        function searchBootcamp(by_month = '', by_course = ''){
           $.ajax({
               url : "search-bootcamp",
               type : "GET",
               dataType : "JSON",
               data : {by_month : by_month, by_course : by_course},
               success : function(data){
                   $('#searchResult').html(data.searched_bootcamp);
               }
           }).done(function() {
               $('.bootcamp-slider').owlCarousel()
           });
        }
        searchBootcamp();

uj5u.com熱心網友回復：

owl carousal從 ajax 添加 html 后，您必須回應。ajax 添加新 html 后，1 次呼叫owl carousalinit

例子：

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  // add html to body
  $(".owl-carousel").owlCarousel();
});

當多次替換 html 時，您可以銷毀并重新初始化示例：

let owl = $(".bootcamp-slider");
$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  // add html to body
  if (!owl.hasClass('owl-loaded')) {
    owl.owlCarousel();
  } else {
    owl.trigger('destroy.owl.carousel');
    owl.owlCarousel();
  }
});

標籤：查询 阿贾克斯 拉拉维尔

上一篇：Jquery切換不會在第二次點擊時關閉

下一篇：檢查屬性和值是否存在于div中