记一次JQuery中的off（）方法的使用及踩坑点...

需求

最近在开发的过程中，碰到这样的问题，就是我在执行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事件，最后校验的时候会触发。

由于有的客户会出现这样的情况，比如客户四个都选完之后，发现有一个选错了，然后客户就去修改下拉框的值。——等等，就这块，身为开发则是这样做：

1. 清除之前未改变任何下拉框的标准值；
2. 判断是否是初始化进入还是由于改变任何下拉框导致的；（因为弹出内容不一样，所以需要区分，在这里我引入了一个flag去区分）

所以在“改变任何下拉框”这种情况导致下，会导致进入两次onchange事件，所以导致弹出了两次

解决办法

采用jQuery的off()方法，在每次调用前，先解绑其上面的方法，然后在去绑定要指定的事件

off().on()这个是为了防止重复绑定事件

注意：这样写的执行顺序是，先执行on里面的元素，然后在off解绑

修改的代码：

$("#concType,#concg,#gluet,#sandt").off("change").on("change",function(){
    //由于解绑后不再执行change事件，所以导致下拉框不在刷新，此时应该加入下拉框刷新方法
    $('.selectpicker').selectpicker('refresh');
}

总结

相对来说，我说的有点含糊(抱歉)，但是本质就是：

1. off().on()这个方法是为了防止重复绑定事件。（如果不使用，可能就会出现我这种状况，弹出框弹出两次）
2. off().on()这个方法的执行顺序：先执行on里面的元素，然后在off解绑

此处有一个简单粗暴的理解方法，您也可以通过该文去理解off方法：

jQuery on（绑定事件）前别忘了off（移除事件）

 

参考链接:https://blog.csdn.net/qq_30114149/article/details/79413432