我目前有2个复选框用于我正在处理的产品过滤。当您选择车辆时，根据车辆制造自动填充车型。我遇到的这个问题是，当车辆模型填充我的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 -->
jQuery功能
$(document).ready(function(){
$(".showmodel").hide();
$('.makes').on('change',function(){ //on checkboxes check
//sending checkbox value into serialize form
var hi=$('.makes:checked').serialize();
var hi2=$('.models:checked').serialize();
if(hi){
$.ajax({
type: "POST",
cache: false,
url: "vehiclefilter.php",
data:{make:hi,
model:hi2},
success: function(response){
document.getElementById('getdata').style.display = "block";
document.getElementById("getdata").innerHTML = response;
$('#result').hide();
}
});
$.ajax({
type: "POST",
url: "vehiclemodels.php",
data:{make:hi,
model:hi2},
cache: false,
success: function(html)
{
$(".models").html(html);
}
});
} else {
$.ajax({
type: "POST",
cache: false,
url: "vehiclefilter.php",
data:{make:hi,
model:hi2,
success: function(response){
document.getElementById('getdata').style.display = "block";
document.getElementById("getdata").innerHTML = response;
$('#result').hide();
}
});
}
});
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
}
}
?>
答案 0 :(得分：0)
我怀疑更改事件是否适用于页面加载，但是当您运行ajax，然后重新填充html时，原始的更改事件方法不再起作用，因为它引用了旧的html。你可以通过使用委托解决这个问题。你把onchange事件放在一个不会重新填充的包装元素上。像这样：
$('#collapseModels').on( "change", ".makes", function() {
});
请注意，这可能不起作用，因为您可能无法委派更改事件。另一种方法是创建将更改事件分配给可重复使用的函数，如下所示，然后取消绑定现有的make方法，然后再更新html，然后重新绑定它，如下所示：
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请求中，所有事件都无法正常重置，并且会减慢到暂停状态