只有最後一項綁定點擊/懸停事件？

我是一個JavaScript的新手& HTML5。我遍歷一組名爲請求的對象併爲它們創建div。我試圖讓它如此，如果任何項目都懸停在樣式類更改上，並且如果點擊它們，我稍後將調用一個函數，但現在只需要一個警報。只有最後一項得到它。只有最後一項綁定點擊/懸停事件？

我已經看過其他人看起來像是類似的問題，但我看不出我要去哪裏。

 for (i= 0; i<reqs.length; i++) { 
      var requestID = "request"+i; 
      // Build the DIV for each request 
      element.innerHTML += "<div id="+requestID+" class=request><img class=requestImage src=images/" 
       +reqs[i].image+" alt=Face />&nbsp;&nbsp;"+reqs[i].name+"</div>"; 

      var requestElement = $('#'+requestID); 
      requestElement.hover(
       function() { 
        $(this).removeClass().addClass("requestHover"); 
        }, 
       function() { 
       $(this).removeClass().addClass("request"); 
       } 
      ); 
      requestElement.click(
      // if the request is clicked, then alert me - testing 
       function() { 
        alert('Handler for .click() called.'); 
       } 
      ); 

     }// end for

從我的理解的$（「＃request1」）應引用第一個div項目，$（「＃請求2」）第二，等它的行爲就像每個.hover和分配。點擊覆蓋前一個。

來源

2011-09-07 Driss Zouak

您可能被封閉相關的錯誤所佔用。請爲此代碼提供更多範圍（任何封閉函數？）。 – Jon

我這樣

for (i= 0; i<reqs.length; i++) { 
     var requestID = "request"+i; 
     // Build the DIV for each request 
     element.innerHTML += "<div id="+requestID+" class=request><img class=requestImage src=images/" 
      +reqs[i].image+" alt=Face />&nbsp;&nbsp;"+reqs[i].name+"</div>"; 
    }// end for 
    var requestElement = $(".request"); 
    requestElement.hover(
     function() { 
      $(this).removeClass().addClass("requestHover"); 
     }, 
     function() { 
      $(this).removeClass().addClass("request"); 
     } 
    ); 
    requestElement.click(
     // if the request is clicked, then alert me - testing 
     function() { 
     alert('Handler for .click() called.'); 
     } 
    );

編輯寫來回答您的評論：

不，這是關閉的問題。在循環結束時，requestID總是相同的，所以$("#"+requestID);總是相同的。它只有一個綁定。

爲了克服這樣的事情，你有一些選擇：

使用$。每次循環（見http://forum.jquery.com/topic/binding-event-to-element-dynamically，http://forum.jquery.com/topic/binding-click-event-in-a-loop，http://api.jquery.com/jQuery.each/）
使用live()方法（見http://api.jquery.com/live/，http://jsfiddle.net/VrzUb/1/（用於點擊））
歸功於每個對象共有的選擇器（例如，使用類，如上）分配事件

來源

2011-09-07 11:39:12

有沒有什麼我在句法上做錯了嘗試獲取ID字段與＃請求+我？爲了提高我的理解。 –

見編輯答案。 –

您可以在for循環分配事件偵聽器，也許這解決您的問題：

for (...) { 
} 

$('div.request').hover(...);

來源

2011-09-07 11:37:14 Niko

這工作對我來說，請參閱http://jsfiddle.net/4VUxA/ – GregL

只有最後一項綁定點擊/懸停事件？

回答

相關問題