要素innerHTMLでイベントリスナーを取り除く

Question

私はページにボタンを追加する機能を持っています。

var count = 0; 

function createOnclickFunction(number) 
{ 
    return function() 
    { 
     alert("This is button number " + number); 
    } 
} 

function addButton(data) 
{ 
    var newbutton = "..." //creates string from data 

    var element = document.getElementById("mydiv"); 
    var children = element.children; 

    element.innerHTML = newbutton + element.innerHTML; 

    var currentCount = count; 
    children[0].onclick = createOnclickFunction(currentCount) 

    count++; 
} 

基本的に、データに基づいてHTMLにボタンを作成します。

私はボタンを追加するたびに、私はそれがDIV #mydivの先頭に追加されたい、とnewbuttonもElementが、Stringないので、私は最初にそれを追加するinnerHTMLプロパティを変更する必要があり#mydiv

その後、最初の子を#mydivにすることによって、（onclickを追加するために）要素を取得する必要があります。

ただし、ページに2番目のボタンを追加すると、最初のボタンがクリックされなくなります。

ボタンを1つだけ追加するようにコードを変更すると、すべて正常に動作します。

これで、トップボタン（最新の追加ボタン）のみをクリックできます。

どうすればこの問題を解決できますか？

また、element.children[0]の代わりにelement.firstChildを使用しようとしました。

ありがとうございます！

編集：ここでは

はjsfiddleです：

https://jsfiddle.net/7c7gtL26/

Answer 1

あなたが問題を誤解しそうです（あなたがstackoverflowある作品のみボタンを見ることができるように）。問題は、コンテンツを挿入するためにinnerHTMLを上書きしていることです。

を挿入するのにinnerHTMLを使用しないでください。イベントリスナーのようなすべての内部データが削除されます。これはここで起こることです。あなたには、いくつかのHTML文字列を付加したい場合は

は、insertAdjacentHTMLを使用します。

var count = 0; 
 
function createOnclickFunction(number) { 
 
    return function() { 
 
    alert("This is button number " + number); 
 
    } 
 
} 
 
function addButton(data) { 
 
    var newbutton = "<button>Click me</button>" //creates string from data 
 
    var element = document.getElementById("mydiv"); 
 
    element.insertAdjacentHTML('afterbegin', newbutton); 
 
    var children = element.children; 
 
    children[0].onclick = createOnclickFunction(count) 
 
    count++; 
 
} 
 
addButton(); 
 
addButton(); 
 
addButton();

<div id="mydiv"></div>