当从 laravel 控制器调用 html 时，猫头鹰轮播被破坏

Posted 2023-05-08

【中文标题】当从 laravel 控制器调用 html 时，猫头鹰轮播被破坏

【英文标题】：owl carousal is broken when html called from laravel controller

【发布时间】：2021-12-14 11:05:48

【问题描述】：

当我将 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" >
                                </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();

【问题讨论】：

是否有任何 jquery 错误？你检查过控制台吗

不，它没有给出任何 jquery 错误

【参考方案1】：

您必须在从 ajax 添加 html 后响应 owl carousal。 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();
  
);

【讨论】：

非常感谢，但它仅适用于第一个请求，当我 0n 更改选择时，它返回相同的问题，我在帖子底部分享我的 jquery

查看我的编辑答案