JQuery在循环中绑定事件

有个页面上需要N个DOM，每个DOM里面的元素ID都要以数字结尾，比如说

<input type="text" name="username" id="username_1" value="" />

<input type="text" name="username" id="username_2" value="" />

<input type="text" name="username" id="username_3" value="" />

现在有个循环，在页面载入的时候需要给这每个元素增加一个onclick事件，很容易想到的写法就是

$(function(){
    for(var i=1; i<=3; i++){
        $('#username_'+i).onclick(function(){
            alert(i);
        });
    }
});

这么写是错误的。。。错误的原因以及类似的错误分析详见 http://blog.sina.com.cn/s/blog_67d9b4220100ryrk.html

然后改成下面的就对了

$(function(){
    for (var i=1; i<=3; i++){
        $("#username_"+i).bind("click", {index: i}, clickHandler);
    }

    function clickHandler(event) {
        var i= event.data.index;
        alert(i);
    }
});