后期绑定onclick事件

时间:2014-02-01 15:42:03

标签: javascript jquery closures

关注部分javscript(使用jquery)。

list = ['a', 'b', 'c'];
for(var i = 0 ; i< list.length ; i++) {
   $("<a>click here</a>").
      click(function(){
          foo(list[i]);
      }).
      appendTo('#sometag');
}
function foo(val) {
    console.log(val);
}
无论您点击哪个标签,

始终打印c。如何打印正确值?
它似乎正在使用i = 3的最后一个值,因此总是

评估o c

2 个答案:

答案 0 :(得分:6)

在触发事件处理程序之前迭代完成时,你需要一个闭包新范围,所以当点击发生时,循环结束,i是它的最后一个值设置为,新范围将i的值保持为该范围的本地值

list = ['a', 'b', 'c'];

for(var i=0; i<list.length; i++) {

   (function(j) {

       $("<a>click here</a>").click(function(){
          foo(list[j]);
       }).appendTo('#sometag');

   }(i));

}

function foo(val) {
    console.log(val);
}

另一个选择是添加更多jQuery

list = ['a', 'b', 'c'];

$.each(list, function(index, item) {
    $("<a />", {text : 'click here',
                on   : {
                    click : function() {
                        foo(item);
                    }
                }
    }).appendTo('#sometag');
});

function foo(val) {
    console.log(val);
}

答案 1 :(得分:3)

创建一个闭包,以便在执行函数时保留特定迭代的i值,而不会在作用域中保留闭包i,从而导致所有创建的函数最终具有最后一次迭代:

var list = ['a', 'b', 'c'];
for(var i = 0 ; i< list.length ; i++) {
   var func = createFoo(list[i]);
   $("<a>click here</a>").
      click(func).
      appendTo('#sometag');
}
function createFoo(value){
    return function(){
        foo(value);
    };
}
function foo(val) {
    console.log(val);
}

JS小提琴: http://jsfiddle.net/5dUgw/

另请注意您需要将int更改为var,因为这是JS。