JS解决因循环绑定click事件失效

很多js新手都会在绑定事件遇到绑定失效的问题。
大致思路就是，比如用一个循环让对应的button按钮绑定对应的事件。

比如这样

	<button id="1">1  </button>
	<button id="2">2  </button>
	<button id="3">3  </button>
</body>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
		for(var i = 1 ; i <=3;i++){
			$("#"+i).click(
				function () {
					console.log(i)  //无论点击哪个按钮，最后输出4
				}
			)
		}
	</script>

更正

这是因为，在click内部的匿名函数构成了函数闭包，i值会一直留在内存中使用，等待循环完毕执行。

      >解决方案如下  1.使用立即执行函数

     for(var i = 1 ; i <=3;i++){
			(function(i){
				$("#"+i).click(
					function () {
						console.log(i)
					}
				)
			})(i)
		}
	</script>

这种方法利用了立即执行函数，从而实现对应的绑定。

      >解决方案2  使用let声明

	for(let i = 1 ; i <=3;i++){
			$("#"+i).click(
				function () {
					console.log(i)  
				}
			)
		}

使用es6的块级作用域，外层作用域无法读取内层作用域的变量 。简单粗暴解决了问题。