关于for循环内部click事件绑定传参的问题

今天处理table表格下的<tr>中的<td>标签中几个按钮点击事件，三个按钮分别要实现置顶，取消置顶，删除操做。其中EditRequest()函数是写好的ajax方法，一开始我是这么写的：

$('.cancel-top').click(function(){
    var pid = $(this).parents('tr').find(".pid").text();
    if(confirm("肯定要取消置顶吗？")){
        EditRequest(pid,'not_top');
    }
});
$('.to-top').click(function(){
    var pid = $(this).parents('tr').find(".pid").text();
    if(confirm("肯定要置顶此主题帖吗？")){
        EditRequest(pid,'top');
    }
});
$('.del-post').click(function(){
    var pid = $(this).parents('tr').find(".pid").text();
    var _this = $(this);
    if(confirm("肯定要删除此主题帖吗？")){
        EditRequest(pid,'del',_this);
    }
});

那么问题来了，好像三个事件函数都差很少，这样写的话产生了大量重复代码，并不以为它足够优雅，因而决定改写它：

 1         var config = [
 2             {'classNm':'cancel-top','msg':'取消置顶','type':'not_top'},
 3             {'classNm':'to-top','msg':'置顶此帖','type':'top'},
 4             {'classNm':'del-post','msg':'删除此帖','type':'del'},
 5         ];
 6         for(var i=0;i<3;i++){
 7             $('.'+config[i].classNm).click(function(){
 8                 var _this = $(this),
 9                     pid = $(this).parents('tr').find(".pid").text();
10                 if(confirm("肯定要"+config[i].msg+"吗？")){
11                     EditRequest(pid,config[i].type,_this);
12                 }
13             })
14         };

显然click事件处理函数内部是获取的i值老是3，此时我想大声呵呵。说来惭愧，我并无深刻理解javascript中的做用域问题。脑补了一下后，将for语句改写以下：

 1         for(var i=0;i<3;i++){
 2             (function(i){
 3                 $('.'+config[i].classNm).click(function(){
 4                     var _this = $(this),
 5                         pid = $(this).parents('tr').find(".pid").text();
 6                     if(confirm("肯定要"+config[i].msg+"吗？")){
 7                         EditRequest(pid,config[i].type,_this);
 8                     }
 9                 })
10             })(i);
11         };

使用闭包就能够巧妙地解决问题，可是总以为jQuery有本身的办法而不是使用难以理解的麻烦的闭包。因而又脑补了一下后，改写以下：

1         for(var i=0;i<3;i++){
2             $('.'+config[i].classNm).click({index:i},function(e){
3                 var _this = $(this),
4                     pid = $(this).parents('tr').find(".pid").text();
5                 if(confirm("肯定要"+config[e.data.index].msg+"吗？")){
6                     EditRequest(pid,config[e.data.index].type,_this);
7                 }
8             })
9         };

jQuery中的事件处理函数均可以自带event参数的，每每都是默认的一些参数。固然也能够手动添加一些参数到它的data属性里面，正是利用了这一点达到了个人目的。忽然就精简了，是否是又进步了一点点了呢？！哈哈哈…