CSS不适用于ajax响应

Question

我希望将外部 CSS 应用于 ajax 响应。 我正在尝试创建一个页面，在用户选择表单中的选项并提交后，然后通过 ajax 加载另一个表单。但 CSS 不适用于 ajax 响应。 我无法找出错误。如果方法不正确，请纠正我。

$('#getStudents').submit(function(e) {
  e.preventDefault();
  $.ajax({
    url: 'feature1/getStudents.php',
    type: 'POST',
    data: $('#getStudents').serialize(),
    cache: false,
    success: function(returndata) {
      //alert(returndata);            
      $("#listStudents").html(returndata);
    }
  });
});

这就是问题所在。第 4 列 css 未应用。 复选框应显示为 ios 开关 (http://abpetkov.github.io/switchery/)

    <?php


    $output='';

    $output = $output. '
    <div class="panel panel-white">
    <div class="panel-heading clearfix">
        <h3 class="panel-title"> Students </h3>
    </div>
    <div class="panel-body">

        <div class="table-responsive">
            <table id="students" class="display table" style="width: 100%; cellspacing: 0;">
                <thead>
                    <tr>
                        <th> ID</th>
                        <th>Student ID</th>
                        <th>Name</th>
                        <th>Attendance</th>                        
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th> ID</th>
                        <th>Student ID</th>
                        <th>Name</th>
                        <th>Attendance</th>
                    </tr>
                </tfoot>
                <tbody>';
                $i=1;
                while($data = mysqli_fetch_assoc($results)) {
                    $output = $output. '<tr>
                        <td>'.$i++.'</td>
                        <td>'.$data["id"].'</td>
                        <td>'.$data["id"].'</td>
                        <td>
                        <div class="ios-switch pull-right switch-md">
                            <input type="checkbox" class="js-switch pull-right fixed-header-check" checked>
                        </div>
                        </td>
                    </tr>'; 
                }

    $output = $output. '
                </tbody>
            </table>  
        </div>
    </div>
    </div>'; 


    echo $output;  

    mysqli_close($con);

    ?>

Answer 1

这是因为包含所有 css 的 html 页面在文档准备就绪时被加载..它读取所有类并根据其应用的样式表..但在 ajax 中，我们将另一个页面加载到相同的 html 页面，这次浏览器没有将 html 类映射到样式表，这就是为什么您的 css 没有应用于该样式表的原因

Answer 2

据我所知，您使用的是外部 JQuery 表插件，所有数据（行）都由 AJAX 调用获取。

您可以使用此设置[备份您以前的文件]：

我想要做的是：只获取 AJAX 调用中所需的行（不完整的表）。所有表结构和 CSS 都已加载并在表单提交上尝试获取所需的行。在您的情况下，浏览器无法动态呈现表格和 CSS。

1.仪表盘.php

<html>
    <head>
          <!-- Link to Plugin CSS-->
          <!--Link to Your Custom CSS -->


     <head>
     <body>
            //HTML and PHP code  Here

       <!-- Link to Plugin Script-->
      <script>
        // AJAX CALL  
            $('#getStudents').submit(function(e) {
                 e.preventDefault();
                $.ajax({
                  url: 'feature1/getStudents.php',
                  type: 'POST',
                  data: $('#getStudents').serialize(),
                  cache: false,
                  success: function(returndata) {
                  //alert(returndata);            
                  $("#students").html(returndata); //Fetch rows Only Not table(See the Next home.php page)
                  }
                }); 
               });

      </script>
     </body> 
</html>

2。主页.php

<div class="row">

   <div class="panel panel-white">
       <div class="panel-heading clearfix">
          <h3 class="panel-title"> Students </h3>
       </div>
      <div class="panel-body">

        <div class="table-responsive">
           <table id="students" class="display table" style="width: 100%; cellspacing: 0;"> 

            </table>
        </div>

       </div>
    </div>  

</div>

3。 getStudents.php

在此页面中修改 $output 变量。

喜欢

 $output='';

$output = $output. '
            <thead>
                <tr>
                    <th> ID</th>
                    <th>Student ID</th>
                    <th>Name</th>
                    <th>Attendance</th>                        
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th> ID</th>
                    <th>Student ID</th>
                    <th>Name</th>
                    <th>Attendance</th>
                </tr>
            </tfoot>
            <tbody>';
            $i=1;
            while($data = mysqli_fetch_assoc($results)) {
                $output = $output. '<tr>
                    <td>'.$i++.'</td>
                    <td>'.$data["id"].'</td>
                    <td>'.$data["id"].'</td>
                    <td>
                    <div class="ios-switch pull-right switch-md">
                        <input type="checkbox" class="js-switch pull-right fixed-header-check" checked>
                    </div>
                    </td>
                </tr>'; 
            }

$output = $output. '
            </tbody></div>'; 

Answer 3

OOps..这不是 CSS 问题。是 javascript 导致了问题。

实际上，switchery.min.js 将带有类 switchery 的 div 附加到 .因为脚本没有初始化，所以渲染失败了。

现在在 getStudents.php 的末尾添加以下 javascript 解决了这个问题。

    echo '<script language="javascript">
       if (Array.prototype.forEach) {
         var elems = Array.prototype.slice.call(document.querySelectorAll(".js-switch"));

         elems.forEach(function(html) {
           var switchery = new Switchery(html);
         });
        } else {
               var elems = document.querySelectorAll(".js-switch");

               for (var i = 0; i < elems.length; i++) {
                   var switchery = new Switchery(elems[i]);
                }
               }
          </script>';