代码示例

<div>
	<input type="text" id="inp1" value="1"></input>
	<input type="text" id="inp2" value="2"></input>
	<input type="text" id="inp3" value="3"></input>
</div>

<script>
	for(var i=1;i<=3;i++){
		jQuery("#inp"+i).bindPropertyChange(function(){
			var alert_value = $("#inp"+i).val();
			alert("我是input"+i+"，我的值是"+alert_value);
		});
	}
</script>

上述代码中，循环给每一个input绑定change事件，当相应的input发生变化时，弹出对应的value值。当我们给id为“inp1”修改为6时，按照逻辑应该会弹出6，但是实际情况是：

你可能会有疑问，为何我改的是input1的值，但弹出来的是input3的值呢？这就是JS中变量作用域问题了，由于JS的机制，在我们for循环绑定change事件后，触发其中某一个input的change事件时，随着for循环的结束，所获取的i为最后一位数，也就是3，所以这个时候根据id会去找input3的值~

那么如何解决这个问题呢？我们需要使用闭包函数解决这个问题。将绑定事件封装为一个函数，在for循环中调用绑定函数，传入相应的i，这个时候闭包会携带包含它的函数的作用域，函数中的变量都是独立存储内存中的，代码如下：

<script>
	for(var i=1;i<=3;i++){
		get_value(i);
	}
	
	function get_value(param){
		$("#inp"+param).change(function(){
			var alert_value = $("#inp"+param).val();
			alert("我是input"+param+"，我的值是"+alert_value);
		});
```	}
</script>

再次运行，发现弹出的就是input1的值了~

今天被这个问题缠绕了许久，终于发现问题点，在此记录一下，防止下次掉坑。但是需要谨慎使用闭包，因为会大量消耗内存导致内存泄漏，或者导致网页卡顿等现象~