DOMにイベントリスナーを含むボタンを動的に追加する方法はありますか？

Question

次のように私は要素を追加しました：

var number = document.createElement('div'); 
number.className = 'number'; 
number.innerHTML = '<div><button id="row">ROW</button></div>'; 
//number.textContent = (i/8) + 1; 
element.appendChild (number); 

次のように私は、ボタンのイベントリスナーを持っている：

var button = document.getElementById('row'); 
button.addEventListener('click', function (event) { 
    transform(targets.row, 1000); 
}, false); 

divタグが浮動divタグにアップ示しているが、それが応答しません変換関数 誰もがクリックをピックアップしていない理由を見つけ出すのを助けることができますか？

例はhttp://www.kreativperspektiv.com/pb2

UPDATEで見つけることができます： 先立ち、以下の応答を読んだのは、私だけでは動作しているようだコードにクリックイベントハンドラを追加しました。

var xcollapse = document.createElement('div'); 
xcollapse.className = 'xcollapse'; xcollapse.innerHTML = '<button onclick="transform(targets.row, 1000)">Expand</button><button onclick="transform(targets.table, 1000)">Collapse</button>'; 
element.appendChild(xcollapse); 

これはうまくいくようですが、より洗練されたソリューションがあると確信しています。そのようなアクションを詳述する特定のボタンを持たなくても、オブジェクトをクリックして拡大してクリックするといいでしょう。

Answer 1

これは親要素にあなたの子要素を追加することがベストプラクティスとはみなされません。

number.innerHTML = '<div><button id="row">ROW</button></div>'; 

あなたが動的にDOMに要素を追加したい場合は、次のように実行する必要があります。

var numberDiv = document.createElement('div'); 
numberDiv.className = 'number'; 

var buttonDiv = document.createElement('div'); 
numberDiv.appendChild('buttonDiv'); 

var button = document.createElement('button'); 
button.id = 'row'; 
buttonDiv.appendChild('button'); 

var buttonText = document.createTextNode("ROW") 
button.appendChild(buttonText); 

element.appendChild (number); 

button.addEventListener('click', function (event) { 
    transform(targets.row, 1000); 
}, false); 

DOM操作の詳細を読むhere

@Quentin（彼のコメントを参照）によれば、どちらも問題なく動作するはずです どこか別の場所。たぶんあなたは質問に詳細を追加することができます。