我的「點擊」addEventListener不能正常工作

我使用下面的代碼來添加偵聽器到（我追加到表中的TBODY），所以我可以看到很好的高光效果，當我把鼠標放在TR。我也有一個「點擊」事件，這使得整行「可點擊」，因此用戶可以輕鬆點擊整行並轉到該特定頁面。我的「點擊」addEventListener不能正常工作

我使用JS，因爲我使用AJAX調用來填充TR（及其少數TD）。

我的列表中的前12個元素用PHP完成，但之後我通過Ajax調用下一個10,10,10 ...。

當我使用PHP和JavaScript添加：與「點擊」的TR它完美，但在下面這段代碼（JavaScript的），只有鼠標懸停和鼠標移開做工精細，「點擊」事件偵聽器添加到所有的window.location.href都是i的最後一個值，當前值（13,14,15）被刪除了......它只增加了15個（所以總是最後一個值 - 我的計數器......它不會增加作爲櫃檯）。

我認爲關於事件監聽器的功能如何，它是如何初始化的，我不知道的。

   for(i=0; i<10; i++){ 

        myTr.addEventListener("mouseover",function(){ 
         this.style.backgroundColor = "#083636" 
         this.style.cursor = "pointer" 
        }); 

        myTr.addEventListener("mouseout",function(){ 
         this.style.backgroundColor = "transparent" 
        }); 

        myTr.addEventListener("click",function(){ 
         window.location.href = '/clubbers/' + clubber_url + '/' + i + '#threads' 
        }); 

      }

*忘了，開始我對支架打字時/複製代碼，現在它看起來不錯

來源

2013-08-03 Adrian Tanase

能否請你檢查你的代碼，你沒有關閉托架... – Pierre

你重複循環十次，它會相應地設置window.location.href值，因此最終只發送最後一個值。 – Whistletoe

你也不需要鼠標懸停和鼠標改變顏色，你可以添加tr：hover {background-color：＃083636;光標：指針}您的css – Desu

這是一個範圍的問題。基本上，你將i傳遞給你的eventListener，它是循環遞增的相同變量。見How do JavaScript closures work?一個更好的解釋

你可以這樣做：

myTr.addEventListener("click",(function(j){ 
    return function(e) { 
    window.location.href = '/clubbers/' + clubber_url + '/' + j + '#threads' 
    } 
})(i));

來源

2013-08-03 18:05:26 axelcdv

您的函數使我的代碼立即跳轉到第一篇文章我加載AJAX，這意味着我加載第一個12行PHP，通常，然後當我開始使用JavaScript函數，AJAX觸發代碼的地方我把我的事件偵聽器，只要我觸發AJAX代碼，它「加載」第一行上的「點擊」...自動以某種方式 –

哎呀你是對的，我的代碼是不正確的，它應該是現在 – axelcdv

作品像一個魅力！感謝在星期六晚上我們在那裏:)） –

你的問題是，從外for循環變量i不是由時的正確捕獲，因爲在評估事件時，循環已經完成，並且變量處於最後一個值。

看看這個帖子的一些解決方案：

Caputured variables in Javascript

來源

2013-08-03 18:04:32 zewa666

function clickTr(i){ 
    return function(){ 
     window.location.href = '/clubbers/' + clubber_url + '/' + i + '#threads'; 
    } 
} 
for(i=0; i<10; i++){ 

       myTr.addEventListener("mouseover",function(){ 
        this.style.backgroundColor = "#083636" 
        this.style.cursor = "pointer" 
       }); 

       myTr.addEventListener("mouseout",function(){ 
        this.style.backgroundColor = "transparent" 
       }); 

       myTr.addEventListener("click",clickTr(i)); 

     }

來源

2013-08-03 18:15:30 Pierre

我認爲你的解決方案工作太配偶，只是從上面的答案中得到它，但你的答案似乎更像我的代碼:)輕鬆閱讀，簡單:)謝謝！ –

我的「點擊」addEventListener不能正常工作

回答

相關問題