的addEventListener適用於靜態的按鈕，而不是動態生成的按鈕

我有一個按鈕在popup.html，像這樣。的addEventListener適用於靜態的按鈕，而不是動態生成的按鈕

<button id='test'>TEST BUTTON</button>

然後我有這個函數和偵聽器在一個單獨的js文件。

function getAjax() 
{ 
    chrome.tabs.executeScript(null, {code:"alert('works!')"}); 
} 

document.addEventListener('DOMContentLoaded', function() { 
    var buttons = document.querySelectorAll('button'); 
    for (var i = 0; i < buttons.length; i++) { 
    buttons[i].addEventListener('click', getAjax); 
    } 
});`

當我使用上面的按鈕調用該函數。現在，如果我動態生成按鈕，如下所示：

var AJAXholder = document.getElementById("AJAXholder"); 
var button = document.createElement("button"); 
button.setAttribute("class", "app-buttons");     
button.setAttribute("id", ""+ objects[i].name +""); 
button.setAttribute("name", ""+ objects[i].name +""); 
    var buttonText = document.createTextNode(""+ objects[i].name +""); 
    button.appendChild(buttonText); 
AJAXholder.appendChild(button);

這些按鈕已正確創建，但無法觸發相同的功能。有什麼我可以做的嗎？

編輯：

我添加了一個新的事件監聽器，因爲我做一個新的按鈕，像這樣：

var newlistener = document.getElementById(""+ objects[i].name +"").addEventListener('click', getAjax);

看來工作。無論如何，不介意學習更好的方法，否則我會投票刪除，當我被允許。

來源

2012-05-09 Jack

包含在你的DOMContentLoaded監聽功能您的按鈕生成代碼？如果沒有，我的猜測是JS腳本運行創建按鈕之前DOMContentLoaded被解僱，所以querySelectorAll('button')得到一個空列表，因爲沒有任何按鍵還不存在。確保您的按鈕創建腳本在您的DOMContentLoaded偵聽器函數之後（或更好地在其內部）按時間順序運行。

來源

2012-05-09 14:43:19 apsillers

的addEventListener適用於靜態的按鈕，而不是動態生成的按鈕

回答

相關問題