動態點擊事件監聽器

我有一個動態的事件監聽循環，看起來像這樣一些問題：動態點擊事件監聽器

profiles.forEach(function(item, i) { 

    document.getElementById("test-" + i).addEventListener("click", function() { 

     chrome.tabs.query({currentWindow: true, active: true}, function (tab) { 

     chrome.tabs.update(tab.id, {url: `https://example.com/profile/${item.platform}/${item.region}/${item.username}`}) 

     }); 

    }) 

})

讓我們說，型材陣列具有2的長度，那麼它只有得到最後一個元素一個「addEventListener」函數，即使我說ID的test-0和test-1應該得到一個附加事件監聽器，因爲循環運行兩次，索引爲0和1.

我讀了一些關於閉包因爲這已經是一個函數在一個正常的循環內，我不知道這個問題可能是什麼。

我將不勝感激任何幫助！

來源

2017-08-06 Macksen

您還沒有說明問題。你得到的錯誤是什麼？ – Harshakj89

哦，問題在於它只是最後一個獲取附加事件偵聽器的id（test-1），而循環中的第一個（test-0）卻沒有。雖然在控制檯中沒有實際的錯誤。 @ Harshakj89 – Macksen

[This]（https://jsfiddle.net/6kurpxum/）似乎工作得很好。您確定您的document.getElementById（「test-」+ i）能夠爲您提供正確的元素嗎？ – afterburn

我發現這個問題，我在循環中遺漏了一個非常重要的部分，忘記了在嘗試解決問題時誤添加到帖子。

鏈接test-0和test-1被附加到第二行循環中的DOM。

profiles.forEach(function(item, i) { 
content.innerHTML += item.column + item.html + "</div>" 

document.getElementById("test-" + i).addEventListener("click", function() { 

    chrome.tabs.query({currentWindow: true, active: true}, function (tab) { 

    chrome.tabs.update(tab.id, {url: `https://example.com/profile/${item.platform}/${item.region}/${item.username}`}) 

    }); 

    }) 
})

所以我創建了一個單獨的循環之後，第一個將點擊事件附加到鏈接。

我不好的不包括，感謝幫助傢伙！

來源

2017-08-06 16:56:47 Macksen

動態點擊事件監聽器

回答

相關問題