Apache Cordova addEventListener未添加

Question

我在網上看過其他問題和其他網站，卻找不到找到使addEventListener正常工作的方法。

我有一個名為的函數，該函數添加按鈕並為每個按鈕添加事件監聽器

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
}

我已經測試了很多次，並且addButton總是添加每個按鈕，但是只有一個按鈕起作用（最后一個按鈕被添加）。 每個按鈕的名稱總是不同的。 我在Line中嘗試了以下方法來添加事件偵聽器，但沒有一個起作用

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


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

和改變

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

至

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

Answer 1

當您執行document.getElementById（“ container”）。innerHTML + =“ {your element}”“時，您實際上是在清除現有的內部元素，並使用一個額外的元素重新創建它們。 這意味着您以前的事件偵聽器將不會在那里。 解決此問題的一種方法是先創建所有按鈕，然后再添加事件偵聽器。 或者您可以使用appendChild避免重新創建所有元素。 或者更好的是，使用諸如angular，react或vue.js之類的框架來為您處理這些事情，這樣您就不必再經歷直接與DOM交互的麻煩了。