需求
最近在开发的过程中,碰到这样的问题,就是我在执行onChange事件的时候,他总执行两次,严重的影响到了用户体验。
分析问题
首先说一下这块的逻辑,在点完四个下拉框之后,“胶凝材料用量标准值”会根据四个下拉框的值从数据库查一下所对应的数据,如果有,则显示,没有,则弹出提示框。
代码(设计业务原因,可能看起来略微费劲):
function changeValue(){
$("#concType,#concg,#gluet,#sandt").change(function(){
var sandardq = $("#sandardq").val();
if(!secondSelect){
if(sandardq == null || sandardq == 0){
initStandardValue();
}else{
var $concType = $("#concType").val();
var $concg = $("#concg").val();
var $gluet = $("#gluet").val();
var $sandt = $("#sandt").val();
standardValue = $concType + $concg + $gluet + $sandt;
getStandardValue(standardValue);
}
}else{
var $concType = $("#concType").val();
var $concg = $("#concg").val();
var $gluet = $("#gluet").val();
var $sandt = $("#sandt").val();
standardValue = $concType + $concg + $gluet + $sandt;
getStandardValue(standardValue);
}
})
}
//初始化
function initStandardValue(){
$("#sandardq").focus(function(){
var $concType = $("#concType").val();
var $concg = $("#concg").val();
var $gluet = $("#gluet").val();
var $sandt = $("#sandt").val();
if($sandt=="" ||$gluet=="" ||$concg=="" ||$concg==""){
alert("请先将下拉框填充完整!!!");
return;
}else{
var standardValue = $concType + $concg + $gluet + $sandt;
getStandardValue(standardValue);
}
changeValue();
})
}
//数据库查值
function getStandardValue(standardValue){
var result;
$.post("irest/base/assessmentIndex_phbyhHandler/getStandardValue",{
'standardValue':standardValue
},function(data){
if(data.text == ""){
$("#sandardq").val("");
alert("您所选择的材料没有标准值,请您重新选择");
secondSelect = true;
}else{
result = data.text;
standard = result;
$("#sandardq").val(result);
$("#sandardq").attr("readonly",true);
}
})
}
问题出在这块:
前提:由于“胶凝材料用量标准值”为必填,此处设置了一个focus事件,最后校验的时候会触发。
由于有的客户会出现这样的情况,比如客户四个都选完之后,发现有一个选错了,然后客户就去修改下拉框的值。——等等,就这块,身为开发则是这样做:
- 清除之前未改变任何下拉框的标准值;
- 判断是否是初始化进入还是由于改变任何下拉框导致的;(因为弹出内容不一样,所以需要区分,在这里我引入了一个flag去区分)
所以在“改变任何下拉框”这种情况导致下,会导致进入两次onchange事件,所以导致弹出了两次
解决办法
采用jQuery的off()方法,在每次调用前,先解绑其上面的方法,然后在去绑定要指定的事件
off().on()这个是为了防止重复绑定事件
注意:这样写的执行顺序是,先执行on里面的元素,然后在off解绑
修改的代码:
$("#concType,#concg,#gluet,#sandt").off("change").on("change",function(){
//由于解绑后不再执行change事件,所以导致下拉框不在刷新,此时应该加入下拉框刷新方法
$('.selectpicker').selectpicker('refresh');
}
总结
相对来说,我说的有点含糊(抱歉),但是本质就是:
- off().on()这个方法是为了防止重复绑定事件。(如果不使用,可能就会出现我这种状况,弹出框弹出两次)
- off().on()这个方法的执行顺序:先执行on里面的元素,然后在off解绑
此处有一个简单粗暴的理解方法,您也可以通过该文去理解off方法:
参考链接:https://blog.csdn.net/qq_30114149/article/details/79413432