作者TonyQ (沉默是金。)
看板Ajax
标题Re: [问题] jquery click事件没作用
时间Sat Sep 18 13:12:54 2010
※ 引述《wa120 (哇120)》之铭言：
: 我在jQuery Element上用阵列的方式来表示
: ex: var item=new array("a","b","c","d"); //a,b,c,d是范例.
^ typo
: 之後实作click事件
: 1.
: $(function(){
: for(var i=0;i<item.length;i++)
: $("#"+item[i]).attr("disabled","disabled");
: for(var i=0;i<item.length;i++)
: {
: if((i+1)<item.length)
: $("#"+item[i]).click(function(){$("#"+item[i+1]).removeAttr("disabled");});
: }
: });
: 这样是没反应的...
把code 重排一下，这样才看得清楚问题。 XD
http://jsfiddle.net/b38wn/2/
问题的说明大概看一下的code就清楚了。
var item=new array("a","b","c","d");
$(function(){
for(var i=0;i<item.length;i++)
$("#"+item[i]).attr("disabled","disabled");
for(var i=0;i<item.length;i++)
^ 注意 i 是在这里宣告的
{
if((i+1)<item.length){
$("#"+item[i]).click(function(){
//注意这里有个子function , but i 这个变数用closure特性与外面共用
// 所以外面的 i 会影响到里面的 i , 且event binding 跟 trigger 会
// 有时间差，实际执行时 i 已经跑到 item.length了
$("#"+item[i+1]).removeAttr("disabled");
//所以这行不会动
});
}
}
});
//btw , in firefox/chrome , button 被 disable之後 ,
也是不会发 onclick event的喔, 如果用的是button 要小心.
-----------------------------------------------------
所以这个问题的基本样貌可以转换为这样
http://jsfiddle.net/b38wn/7/
也就是
var item=["a","b","c","d"];
$(function(){
for(var i=0;i<item.length;i++)
{
$("#"+item[i]).click(function(){
alert("i am clicked and i is " + i);
// 被执行到时i很有可能已经是 item.length 了
// you can do something with i
//$("#"+item[i+1]).removeAttr("disabled");
});
}
});
有一个很简单的方法可以解决这问题，利用另一个 scope 来把 i 存下来。
http://jsfiddle.net/b38wn/8/
var item=["a","b","c","d"];
$(function(){
for(var i=0;i<item.length;i++)
{
(function(){ //这个匿名函式只会被执行一次
var index = i ;
// 这个函式执行当下 index 会被设成 i ,
// 而且不同 function 底下宣告的变数有不同scope , 彼此不会互相影响.
$("#"+item[index]).click(function(){
alert("i am clicked and i is " + index);
// you can do something with i
//$("#"+item[i+1]).removeAttr("disabled");
});
})();//匿名函式执行点
}
});
这个应该是最直觉的作法，用 jQuery event 传递资料的方式进行。（推荐用这个）
http://jsfiddle.net/b38wn/9/
var item=["a","b","c","d"];
$(function(){
for(var i=0;i<item.length;i++)
{
$("#"+item[i]).bind("click",{ index:i },function(e){
alert("i am clicked and i is " + e.data.index);
// you can do something with i
//$("#"+item[i+1]).removeAttr("disabled");
});
}
});
--
网页上拉近距离的帮手 实现 GMail丰富应用的功臣
数也数不清的友善使用者体验 这就是ｊａｖａｓｃｒｉｐｔ
欢迎同好到 AJAX 板一同讨论。
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 111.82.253.194
1F：→ TonyQ:其实也是可以考虑用 jQuery context 中 each 带过来的变数啦 09/18 13:16
2F：→ TonyQ:只是原po 是 jQuery 一个阵列做id eelect还要自己把他们unio 09/18 13:16
3F：→ TonyQ:union 起来，有点小费工就不写 sample 了。 09/18 13:17
4F：推 wa120:scope的观念实在是太特别了.. 感谢.. 09/18 19:53
5F：→ TonyQ:还有一个更麻烦的咧， javascript 是没有block scope的.. 09/18 19:59
6F：→ TonyQ:所以会发生很可怕的事情。XD 09/18 19:59
7F：推 wa120:哈 在$(function(){});外面设一个全域变数也ok 09/20 09:15
8F：→ wa120:这也是我看完itisjoe大说的内容後最初的想法... 09/20 09:16
9F：→ wa120:遭了 我好像弄错了= = 09/20 09:18