JQuery在循环中绑定事件的问题详解

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

1 2 3

<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事件，很容易想到的写法就是

1 2 3 4 5 6 7

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

这么写是错误的。。。

错误的原因以及类似的错误分析详见这篇文章

然后改成下面的就对了

 

1 2 3 4 5 6 7 8 9 10

$( 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);   } });

 

举例：

　　　　$(function(){

                for(var n=1;n<menulist.length;n++){

                    $(".rm-container #level"+menulist[n].id+" a").bind("click", {index: menulist[n].name}, clickHandler);

                }

                function clickHandler(event) {

                    var i= event.data.index;

                    alert(i);//输出a标签的名字

                    return false;//点击a之后，控制页面不跳转

                }

            });