首页 > 解决方案 > ajax 成功后 owl-carousel css 和 js 文件不能应用于我的代码

问题描述

我使用以下方法来产品过滤器代码非常适合 apge 加载,但是当我从控制器发送一些 html 代码以使用 ajax 调用查看和加载时。它可以工作,但在成功功能之后。某些功能无法应用。当我第一次加载我的网站时,它工作正常,并且一些 owl-carousel、owl-theme、owl-loaded 类适用于 div ps-shoe__variant 正常但在 ajax 调用之后它不会加载并且 div ps-shoe 的结构 -变种感到不安我很困惑会发生什么?需要解决方案

看法:

<div class="ps-product__columns">
    <div class="ps-shoe__content">
                      <div class="ps-shoe__variants">
                         <div class="ps-shoe__variant normal">
                                <?php
                                   $images=[]; 
                                   $images = explode(",",$product_data->product_multiple_image);
                                 ?>
                                 @foreach($images as $image)
                                  <img src="https://datamansolutions.in/ecommerce/images/{{$image}}" alt="">
                                 @endforeach
                              </div>
    </div>
    </div>
    </div>

控制器:

  public function getDetails(Request $request)
    {
      $product = DB::table('table_subcategory')
        ->join('table_category','table_subcategory.category_id','=','table_category.category_id')
        ->join('table_product','table_subcategory.subcategory_id','=','table_product.subcategory_id')
        ->select('table_product.*','table_category.category_name','table_subcategory.subcategory_name')
        ->where('table_category.category_id',$request->cat_id) 
        ->get();
      $output='';
        foreach($product as $product_data)
          {

            
               $output .= '<div class="ps-shoe__content">';
               $output .= '<div class="ps-shoe__variants">';
               $output .= '<div class="ps-shoe__variant normal">';
               
                    foreach($images as $image)
                     {
                $output .='<img src="https://datamansolutions.in/ecommerce/images/'.$image.'" alt="">';
                     }
                             
                $output .='</div>';
                $output .= '</div>';
                $output .= '</div>';

            }

         echo $output;
    }

阿贾克斯:

$(document).on('click', '.category_li', function(){
var cat_id = $(this).attr("data-val");
//alert(sub_id);
    $.ajax({
    type : 'get',
    url : '/getDetails',
    data:{ 'cat_id': cat_id
    },
    success:function(data)
    {
        console.log(data);

        $('.ps-product__columns').html(data);
    }
});
});

标签: laravel

解决方案


推荐阅读