Re: [問題] jquery click事件沒作用

[TonyQ (沉默是金。)]

※ 引述《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
→ TonyQ:其實也是可以考慮用 jQuery context 中 each 帶過來的變數啦
→ TonyQ:只是原po 是 jQuery 一個陣列做id eelect還要自己把他們unio
→ TonyQ:union 起來，有點小費工就不寫 sample 了。
推 wa120:scope的觀念實在是太特別了.. 感謝..
→ TonyQ:還有一個更麻煩的咧， javascript 是沒有block scope的..
→ TonyQ:所以會發生很可怕的事情。XD
推 wa120:哈 在$(function(){});外面設一個全域變數也ok
→ wa120:這也是我看完itisjoe大說的內容後最初的想法...
→ wa120:遭了 我好像弄錯了= =