您的位置:首页 > Web前端 > JQuery

jquery循环绑定事件有一个坑----总是绑定最后一个元素

2017-08-04 18:33 375 查看
 1. 先看一段用jquery循环绑定事件的代码,要求是对每个元素都作事件绑定。结果在绑定事件中只能得到最后一个值,如下代码片段1所示:

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,所有的子函数则是使用了父函数传入的参数,子函数的子函数则是使用了这个参数,由于参数传递对于数字来说是传值,所以每个子函数的参数则是全新的拷贝之后的数字对象。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: