JS文件未通过ajax调用加载

Question

所以我正在做的是，当有人单击搜索按钮时，它会通过 ajax 调用加载轮播的 html 代码，该代码位于另一个文件中并位于 <div id="filter_product"></div> 下。它的 css 和 js 链接在我正在进行 ajax 调用的文件的页眉和页脚中。我只调用轮播的html。让我给你看我的代码

ajax 调用是

                function submit() {
              $.ajax({
                method: "POST",
                url: "<?php echo base_url() ?>public_controller/search_product",
                dataType:'html',
                data: {color:color, year:year, cat:cat, brand:brand, model:model},
                success: function(data){
                  console.log(data);
                    $('#filter_product').html(data);
                }
              });
            }
            $(document).on('click','#serch_btn',function(){
              submit();
            })

控制器代码是

  public function search_product(){
$data['cat'] = $this->input->post('cat');
$data = $this->load->view('public/result_product',$data,TRUE);
echo $data;}

如果我不通过 ajax 调用调用轮播代码，只需将其放在 index.php 中，它就可以正常工作。但是当我通过ajax调用调用代码时，它的js文件不起作用并且显示被打乱但html加载正常。有什么办法可以解决这个问题。 提前致谢

Answer 1

函数名称提交 is reserved。你不能使用它。尝试重命名它。

建议：PHP方法中不需要echo，base_url()可以在下一种方式使用

public function search_product(){
    $data['cat'] = $this->input->post('cat');
    $this->load->view('public/result_product',$data);
}
//////////////////////////////////////////////////////////
url: "<?= base_url('public_controller/search_product') ?>",

在您的 AJAX 请求成功函数中将行 $('#filter_product').owlCarousel(); 放在 $('#filter_product').html(data); 之后。