<html>
    
<head>
        
<title></title>
        
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
</head>
    
<body>
        
<script type="text/javascript">
            $(document).ready(
function () {
                
var array = [0123];

                
// 1.
                /*
                for(var index in array) {
                    $("#btn" + index).click(function() {
                        var item  = array[index];
                        alert(item);
                    });
                }
*/
                
// 始终弹出3, 因为function() {} 并没有被立即解析,直到调用的时候才被解析,这时index已经是3了。


                
// 2.
                /*
                for(var index in array) {
                    $("#btn" + index).click(function(i) {
                        var item  = array[i];
                        alert(item);
                    }(index));
                }
*/
                
// 立即弹出0, 1, 2, 3,因为使用了function() {}(index)立即被解析,遇到alert,就立即弹出来了。


                
// 3.
                /*for (var index in array) {
                    $("#btn" + index).click(function (i) {
                        return function () {
                            var item = array[i];
                            alert(item);
                        };
                    } (index));
                }
*/
                
// 正确执行,点击btn0,弹出0,点击btn1,弹出1...
                // 1.因为function(i) {}(index)是被立即解析的,所以i依次送入的是0, 1, 2, 3
                // 2.内部没有直接alert,是因为不想立即执行,想点击时再执行,所以返回了一个函数出去。


                
// 4.
                for (var index in array) {
                    $(
"#btn" + index).bind("click", {index: index}, clickHandler);
                }

                
function clickHandler(event) {
                    
var index = event.data.index;
                    
var item = array[index];
                    alert(item);
                }
                
// 正确执行,点击btn0,弹出0,点击btn1,弹出1...
                // 利用了event.data,因为index在绑定的时候已经被持久化到event.data中了,所以响应的时候我们可以取到。
            });
        
        
</script>

        
<input type="button" id="btn0" value="btn0" />
        
<input type="button" id="btn1" value="btn1" />
        
<input type="button" id="btn2" value="btn2" />
        
<input type="button" id="btn3" value="btn3" />        
    
</body>
</html>
posted on 2010-08-05 13:39 sanmao 阅读(2630) 评论(1)  编辑  收藏

FeedBack:
# re: jquery循环绑定事件
2014-06-12 16:28 | 凌渡辰风
疑惑了很久的,看到此博文,理解了问题出现的原因!
赞一个~  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 

常用链接

留言簿(5)

随笔分类

随笔档案

搜索

  •  

最新评论

阅读排行榜

评论排行榜