CSS未正确显示jQuery Post

我现在有两个复选框用于我正在处理的产品过滤。选择车辆品牌时，根据车辆品牌自动填充车型。我遇到的问题是，当车辆模型填充我的css时，它不能正常工作

我的复选框在一定的高度范围内并且可以滚动，但是一旦我的jquery脚本返回车辆模型列表，它就不再可以滚动，并且模型就在一个很长的列表中

php页面中的复选框

<div class="showmake">
<!-- Make Side Filter START -->
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingfoure">
            <a class="collapsed" role="button" data-toggle="collapse" href="#collapseMakes" aria-expanded="false" aria-controls="collapseMakes">Refine By Make</a>
        </div>
        <div id="collapseMakes" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingfoure">
            <div class="panel-body">
                <div class="cs-select-model">
                    <ul class="cs-checkbox-list mCustomScrollbar" data-mcs-theme="dark">
                    <?php
                        // connect to database
                        include 'config/config.php';
                        include 'config/opendb.php';

                        $chkbx = 0;
                        $sql="SELECT make, COUNT(*) as cnt FROM vehicles GROUP BY make ASC";                                                       
                        $rs=$conn->query($sql);

                        $rs->data_seek(0);
                        while($row = $rs->fetch_assoc()) {
                            $chkbx++;
                            echo"<li>
                                     <div class='checkbox'>
                                         <input type='checkbox' name='makes[]' value='{$row['make']}' id='{$row['make']}' class='makes' />
                                         <label for='{$row['make']}'>{$row['make']}</label>
                                         <span>({$row['cnt']})</span>
                                     </div>
                                 </li>";
                        }
                    ?>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Make Side Filter END -->
<!-- Model Side Filter START -->
<div class="showmodel">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingfoure">
            <a class="collapsed" role="button" data-toggle="collapse" href="#collapseModels" aria-expanded="false" aria-controls="collapseModels">Refine By Model</a>
        </div>
        <div id="collapseModels" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingfoure">
            <div class="panel-body">
                <div class="cs-select-model">
                    <ul class="cs-checkbox-list mCustomScrollbar models" data-mcs-theme="dark" name="models">
                     <?php
                         $chkbx = 0;
                         $sql="SELECT model, COUNT(*) as cnt FROM vehicles GROUP BY model ASC";
                         $rs=$conn->query($sql);
                         $rs->data_seek(0);

                         while($row = $rs->fetch_assoc()) {
                             $chkbx++;
                             echo"<li>
                                      <div class='checkbox'>
                                          <input type='checkbox' name='models[]' value='{$row['model']}' id='{$row['model']}' class='models' />
                                           <label for='{$row['model']}'>{$row['model']}</label>
                                           <span>({$row['cnt']})</span>
                                       </div>
                                   </li>";
                          }
                      ?>
                  </ul>
              </div>
          </div>
      </div>
  </div>
  </div>
  <!-- Model Side Filter END -->

vehiclemodels.php

<?php

// connect to database
include 'config/config.php';
include 'config/opendb.php';

if(!empty($_POST['make'])) {
    //unserialize to jquery serialize variable value
    $makeis=array();
    parse_str($_POST['make'],$makeis); //changing string into array

    //split 1st array elements
    foreach($makeis as $manufacturer){
        $manufacturer;
    }

    $manufacturers=implode("','",$manufacturer); //change into comma separated value to sub array
    $sql="SELECT model, COUNT(*) as cnt FROM vehicles WHERE make IN ('$manufacturers') GROUP BY model ASC";

    // query database
    $rs=$conn->query($sql);
    $rs->data_seek(0);

    while($rows = $rs->fetch_assoc()) {
    ?>
        <li>
            <div class="checkbox">
                <input type="checkbox" name="models[]" value="<?php echo"{$rows['model']}";?>" id="<?php echo"{$rows['model']}";?>" class="models" />
                <label for="<?php echo"{$rows['model']}";?>"><?php echo"{$rows['model']}";?></label>
                <span>(<?php echo"{$rows['cnt']}";?>)</span>
            </div>
        </li>
<?php

    }
}

?>

---

我怀疑更改事件在页面加载时起作用，但是当您运行ajax，然后重新填充html时，您原来的更改事件方法就不再起作用了，因为它引用了旧的html。你可以通过授权来解决这个问题。将onchange事件放在包装器元素上，该元素不会重新填充。像这样：

$('#collapseModels').on( "change", ".makes", function() {

});

请注意，这可能不起作用，因为您可能无法委派更改事件。另一种方法是按如下方式创建并将更改事件分配给可重用函数，然后在更新html之前解除现有make方法的绑定，然后按如下方式重新绑定：

 var fnChangeMethod = function(){

           /* 
               your change event method here ....

            */


            cache: false,
            success: function(html)
            {
              /*
                replace your code with this
             */
                $('.makes').unbind('change', fnChangeMethod);
                $(".models").html(html);
                $('.makes').on('change', fnChangeMethod);
            }
           /* 

              the rest of the method etc....

           */
}

$('.makes').on('change', fnChangeMethod);

解除原始更改事件的绑定非常重要，因为否则浏览器可能会出现内存泄漏，并且在每次ajax请求时，所有事件都不会正确重置，并会减速到令人生厌的停止状态。
对于大量代码，请减少它！感谢您的时间和回复，steve，但我对Jquery是新手，我不知道如何实现您修改我的代码的建议。老实说，我认为这将是一个更简单的解决办法。
 var fnChangeMethod = function(){

           /* 
               your change event method here ....

            */


            cache: false,
            success: function(html)
            {
              /*
                replace your code with this
             */
                $('.makes').unbind('change', fnChangeMethod);
                $(".models").html(html);
                $('.makes').on('change', fnChangeMethod);
            }
           /* 

              the rest of the method etc....

           */
}

$('.makes').on('change', fnChangeMethod);