通过ajax调用加载html时未应用Css

Question

我的控制器代码是

  public function search_results()
  {
    $data['product_select'] = $this->input->post('product_select');
    $this->load->view('public/search_results');
  }

而js代码是

   $('#serch_btn').click(function(){
   let product_select = $("#product_select").val();
   console.log(product_select);
   $("#hide_content").hide();
   $.ajax({
       url:'<?php echo base_url() ?>public_controller/search_results',
       method:'post',
       dataType:'html',
       data:{product_select:product_select},
       success:function(data) {
        $('#show_content').html(data);
       }
     });
   });

html 正在加载，但它的样式未应用，如 theme.css 等。我知道加载页面时会加载 css，因此当我进行 ajax 调用时，css 不适用于通过 ajax 调用加载的 html。但我在其他项目中做过这个，效果很好。在这我遇到了麻烦。我该如何克服这个问题

Answer 1

您需要将控制器函数 search_results() 的视图作为数据返回（回显），以便在 ajax 成功函数中接收它，从而操作您的 DOM - 无需重新加载页面。

现在您正在加载一个新视图，即没有您之前可能与此页面一起加载的任何其他视图，并且您可能已经加载了 css 文件。

您需要通过 ajax 将其作为数据发送回，而不是在控制器中加载视图：

  public function search_results()
  {
    $data['product_select'] = $this->input->post('product_select');
    echo $this->load->view('public/search_results', $data, true);
  }

见Returning views as data

调试提示：在你的 ajax 成功中放置一个 alert() 并查看它是否被触发

P.S.：如果您在此视图文件中有样式表，它将是级联中的最后一个并且仅适用于此视图。