jquery循环绑定事件有一个坑----总是绑定最后一个元素
2017-08-04 18:33
375 查看
1. 先看一段用jquery循环绑定事件的代码,要求是对每个元素都作事件绑定。结果在绑定事件中只能得到最后一个值,如下代码片段1所示:
2. 原因分析:始终是数组中最后一个值, 因为function() {} 并没有被立即解析,直到调用的时候才被解析,这时index已经是1了。
3. 按如下方式修改,则可以在每个元素绑定事件中,获取绑定时对应的值,如下代码片段2:
进一步分析,如下代码片段3:
for(var i = 0; i < 2; i++){
btns[i].onclick = function (){
alert(i);
i = i + 1;
}
}
网上很多资料提到了闭包,然后说了好多东西来说明什么是闭包,有一个通俗的讲法是子函数中使用了父函数的私有变量。
代码片段1其实也是使用了闭包,只不过所有的子函数共用了父函数的一个私有变量,通过代码片段3可以看出这一点,无论点击哪个按钮之后提示的数字都会自增一,而且两者的自增是连续的而不是独立的。
代码片段2,所有的子函数则是使用了父函数传入的参数,子函数的子函数则是使用了这个参数,由于参数传递对于数字来说是传值,所以每个子函数的参数则是全新的拷贝之后的数字对象。
var checkMutipleChoices=[{questionId:7547,maxNum:2},{questionId:7553,maxNum:3}]; for(var i=0;i<checkMutipleChoices.length;i++){ var qId=checkMutipleChoices[i].questionId; var maxNum=checkMutipleChoices[i].maxNum; $('input[name="'+qId+'"]').bind('click',function(){ var count=0; console.log(qId); //总是输出7553 console.log(maxNum);//总是输出3 }); }
2. 原因分析:始终是数组中最后一个值, 因为function() {} 并没有被立即解析,直到调用的时候才被解析,这时index已经是1了。
3. 按如下方式修改,则可以在每个元素绑定事件中,获取绑定时对应的值,如下代码片段2:
var checkMutipleChoices=[{questionId:7547,maxNum:2},{questionId:7553,maxNum:3}]; for(var i=0;i<checkMutipleChoices.length;i++){ var qId=checkMutipleChoices[i].questionId; var maxNum=checkMutipleChoices[i].maxNum; $('input[name="'+qId+'"]').bind('click',{index:i}function(event){ var count=0; var i=event.data.index; var qId=checkMutipleChoices[i].questionId;//获取对应的值 var maxNum=checkMutipleChoices[i].maxNum;//获取对应的值 }); }
进一步分析,如下代码片段3:
for(var i = 0; i < 2; i++){
btns[i].onclick = function (){
alert(i);
i = i + 1;
}
}
网上很多资料提到了闭包,然后说了好多东西来说明什么是闭包,有一个通俗的讲法是子函数中使用了父函数的私有变量。
代码片段1其实也是使用了闭包,只不过所有的子函数共用了父函数的一个私有变量,通过代码片段3可以看出这一点,无论点击哪个按钮之后提示的数字都会自增一,而且两者的自增是连续的而不是独立的。
代码片段2,所有的子函数则是使用了父函数传入的参数,子函数的子函数则是使用了这个参数,由于参数传递对于数字来说是传值,所以每个子函数的参数则是全新的拷贝之后的数字对象。
相关文章推荐
- jQuery给一个元素绑定事件前,一次点击会多次触发的问题所在
- jQuery一个元素绑定多个相同事件的解决
- 用Jquery循环的给元素绑定事件
- jquery 循环获取表单下一个元素(回车绑定tab事件)
- 【JQuery】一个DOM元素,多次绑定同一事件的解决方案
- for循环绑定监听事件索引值总是最后一个
- 【解决方案】闭包函数在for循环中的使用案例——for循环绑定监听事件索引值总是最后一个
- jQuery获取绑定自定义事件的元素
- JQuery给动态生成的DOM元素绑定点击事件
- 【JavsScript】一个元素绑定多个事件
- jQuery给动态添加的元素绑定事件的方法
- jQuery 判断元素上是否绑定了事件
- JQuery为页面Dom元素绑定事件及解除绑定方法
- 【JQuery】使用one()方法绑定元素的一次性事件
- 浅谈Jquery为元素绑定事件
- JQuery动态元素事件绑定问题
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参(selected的值和页面其它元素的值)以及js的select
- jQuery 绑定事件到动态创建的元素上
- 【jQuery】使用unbind()方法移除元素绑定的事件
- 为动态添加的元素绑定事件-JQuery