Apache Cordova addEventListenerが追加されていません

Question

他の質問や他のサイトをオンラインで見ており、addEventListenerを動作させる方法を見つけることができませんでした。

私はこの何度もテストしているとaddButtonは、常にすべてのボタンが追加されます

function displayData(){ 
    for(var key in localStorage){ 
     addButton(key); 
    } 
} 

function addButton(name){ 
    var button = '<button id='+ name +'>'+name+'</button>'; 
    document.getElementById("container").innerHTML += button; 
    // Line to add event listener 
} 

各ボタンのイベントリスナーをボタンを追加し、追加と呼ばれる機能を持っていますが、ボタンの一方のみが（最後のものを作品加えた）。名前は常にボタンごとに異なります。私は

document.getElementById(name).addEventListener("click", foo); 


//jQuery is included 
$("#"+name).click(function(){ 
    foo(); 
}); 

を働いて、あなたがのdocument.getElementById（「コンテナ」を行うと

'<button onclick="foo();" id='+ name +'>'+name+'</button>' 

Answer 1

に

'<button id='+ name +'>'+name+'</button>' 

を変更しているイベントリスナが、どれを追加しラインで、次の方法を試してみました）.innerHTML + = "{あなたの要素}"、あなたは効果的に既存の内部要素を拭き取り、1つの余分な要素で再作成します。これは、以前のイベントリスナーがそこにいないことを意味します。この問題を回避するには、すべてのボタンを最初に作成し、後でイベントリスナーを追加する方法があります。または、appendChildを使用してすべての要素を再作成しないようにすることもできます。それとも、角度、反応、またはvue.jsのようなフレームワークを使用してこのようなことを処理しますので、DOMと直接やりとりする手間を省くことができます。