addEventListenerは静的なボタンでは動作しますが、動的に生成されるボタンでは機能しません

Question

私はpopup.htmlのボタンを持っています。

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

次に、この関数とリスナーが別のjsファイルにあります。

上記のボタンを使用すると、関数が呼び出されます。

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); 

これらのボタンが正しく作成されていますが、同じ機能を発射することができません。今、私はそうのように、動的にボタンを生成します。それを機能させるために私ができることはありますか？

EDIT：

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

動作するようです：

私は新しいボタンを作るように私はそうのように、新しいイベントリスナを追加しました。とにかく、より良い方法を学ぶ気にならないでしょうか、私が許可されたときに私は投票に投票します。

Answer 1

あなたのDOMContentLoadedリスナーに含まれるボタン生成コードは機能していますか？そうでなければ、ボタンを作成するためにJSスクリプトが実行される前にDOMContentLoadedが実行されているので、querySelectorAll('button')はまだボタンが存在しないので空のリストを取得します。あなたのボタン作成スクリプトが、あなたのDOMContentLoadedリスナー機能の後に（あるいは、より良いことに）、時間順に実行されていることを確認してください。