作者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