無法立即在彈出窗口中“按下”剛剛創建的按鈕。 我必須關閉彈出窗口，然后再次打開它（chrome-extension彈出窗口）

Question

欣賞，可以跳過

我在這里閱讀了這篇很棒的文章： 如何返回異步調用的響應？ 。 多虧了這里令人驚嘆的社區，我對這個項目確實走得很遠，但是只有一個最終的錯誤。

程序應如何運作

我有一個程序，它使用chrome擴展名（瀏覽器操作）。 當用戶單擊圖標時，他/她可以添加當前網站的鏈接，一次刪除所有鏈接，或者僅刪除一個鏈接，並在鏈接標題旁邊添加一個“ X”按鈕。

編碼

這來自popup.js，問題出在這些函數的“流程”中。

 document.addEventListener('DOMContentLoaded', function() { restore(); document.getElementById('add').addEventListener('click', fetchUrl); document.getElementById('clear').addEventListener('click', clearAll); }); function restore() { // get the tab link and title chrome.storage.local.get({urlList:[], titleList:[]}, function(data) { urlList = data.urlList; titleList = data.titleList; // add the titles and url's to the DOM for (var i = 0, n = urlList.length; i < n; i++) { addToDom(urlList[i], titleList[i]); } // create event listeners for all the 'X' buttons next to list items // after the 'addToDom' function has been executed var allButtons = document.getElementsByClassName('buttons'); for (var j = 0, k = allButtons.length; j < k; j++) { listenJ(j); } function listenJ(j) { allButtons[j].addEventListener('click', () => removeMe(j)); } }); } function removeMe(j) { // remove it from the DOM var items = document.getElementsByClassName('items'); var list = document.getElementById('list'); // the specific URL to delete var item = items[j]; list.removeChild(item); // return the DOM to original state if (items.length === 0) { document.getElementById('list').innerHTML = ''; document.getElementById('div').innerHTML = '<h3>No content yet! Click "add link" to add the link of the current website!</h3>'; } // remove it from chrome-storage chrome.storage.local.get({urlList:[], titleList:[]}, function(data) { urlList = data.urlList; titleList = data.titleList; urlList.splice(j, 1); titleList.splice(j, 1); // update chrome storage saveList(); }); } function addToDom(url, title){ // change the (greeting) text message document.getElementById("div").innerHTML = "<h2 id='title'>Saved Pages</h2>"; // Build the new DOM elements programmatically var newLine = document.createElement('li'); var newLink = document.createElement('a'); var button = document.createElement('button'); newLink.textContent = title; newLine.appendChild(button); button.setAttribute('class', 'buttons'); button.textContent = 'delete'; newLine.setAttribute('class', 'items'); newLink.setAttribute('href', url); newLink.setAttribute('target', '_blank'); // opens link in new tab newLink.setAttribute('tabindex', -1); // remove focus from links in popup-window newLink.setAttribute('id', 'item'); newLine.appendChild(newLink); document.getElementById('list').appendChild(newLine); } 

有關更多信息：

popup.html：gist.github.com/kobrajunior/1c26691734c19391c62dc336ed2e1791

manifest.json：gist.github.com/kobrajunior/78acda830c2d1c384333542422f1494d

錯誤

每當我在彈出窗口中按“添加鏈接”時，就會顯示該鏈接和“ X”按鈕。 但是，當我按下該按鈕時，它不會立即起作用。 我首先必須關閉彈出窗口，然后再次打開它，然后按“ X”按鈕。 我知道異步調用的順序出了點問題，但是我不能對此付諸行動。

編輯

我已經添加了安德魯的答案，但似乎存在以下問題：每次嘗試刪除最后一個鏈接時，它都可以正常工作而不會出現問題。 僅當我在最后一個鏈接之前有一個鏈接（或第一個鏈接之前甚至是第二個鏈接）並且嘗試通過“ X”按鈕刪除該鏈接時，它才會刪除已刪除鏈接下的所有鏈接， 包括要刪除的鏈接。已刪除。 請看這張圖片：

之前：我還沒有單擊該按鈕，但是我將要： https : //i.stack.imgur.com/IFZc6.png

之后：在我單擊該按鈕之后： https : //i.stack.imgur.com/cafqr.png

另外，每當我嘗試刪除一個鏈接時，調試器都會給我此錯誤： https : //i.stack.imgur.com/nStFr.png

該錯誤的位置在我的removeMe函數和以下特定代碼中：

 list.removeChild(item);

Answer 1

我相信這里的問題是您正在創建一個元素，如下所示：

function addToDom(url, title){
    // change the (greeting) text message
    document.getElementById("div").innerHTML = "<h2 id='title'>Saved Pages</h2>";

    // Build the new DOM elements programmatically
    var newLine = document.createElement('li');
    var newLink = document.createElement('a');
    var button = document.createElement('button');
    newLink.textContent = title;
    newLine.appendChild(button);
    button.setAttribute('class', 'buttons');
    button.textContent = 'delete';
    newLine.setAttribute('class', 'items');
    newLink.setAttribute('href', url);
    newLink.setAttribute('target', '_blank');   // opens link in new tab
    newLink.setAttribute('tabindex', -1);       // remove focus from links in popup-window
    newLink.setAttribute('id', 'item');
    newLine.appendChild(newLink);
    document.getElementById('list').appendChild(newLine);
}

最后一行創建一個子項並將其附加到頁面。 但是，由於此孩子是在附加事件綁定之后創建的，因此沒有事件綁定附加到此特定元素。

function restore() {
    // get the tab link and title
    chrome.storage.local.get({urlList:[], titleList:[]}, function(data) {
        urlList = data.urlList;
        titleList = data.titleList;

        // add the titles and url's to the DOM
        for (var i = 0, n = urlList.length; i < n; i++) {
            addToDom(urlList[i], titleList[i]);
        }

        // create event listeners for all the 'X' buttons next to list items
        // after the 'addToDom' function has been executed
        var allButtons = document.getElementsByClassName('buttons');
        for (var j = 0, k = allButtons.length; j < k; j++) {
            listenJ(j);
        } 
        function listenJ(j) {
            allButtons[j].addEventListener('click', () => removeMe(j));
        }   
    }); 
}

想象一下是否有8個人參加了一次吃餡餅大賽。 這些人一開始就得到了餡餅，可以坐下來吃餡餅。

如果一個人遲到。 他沒有派，因為他們已經被派發了。 因此他無法參加比賽。

上面的代碼可以做到這一點。 它分配事件（派）之前出現的那個家伙有一個。

因此，只需移出該功能即可。

function createButtonEvents() {
    // create event listeners for all the 'X' buttons next to list items
    // after the 'addToDom' function has been executed
    var allButtons = document.getElementsByClassName('buttons');
    for (var j = 0, k = allButtons.length; j < k; j++) {
        listenJ(j);
    } 
    function listenJ(j) {
        allButtons[j].addEventListener('click', () => removeMe(j));
    }   
}

function restore() {
    // get the tab link and title
    chrome.storage.local.get({urlList:[], titleList:[]}, function(data) {
        urlList = data.urlList;
        titleList = data.titleList;

        // add the titles and url's to the DOM
        for (var i = 0, n = urlList.length; i < n; i++) {
            addToDom(urlList[i], titleList[i]);
        }
        createButtonEvents();
    }); 
}

創建按鈕后，在創建函數中調用它。

function addToDom(url, title){
    // change the (greeting) text message
    document.getElementById("div").innerHTML = "<h2 id='title'>Saved Pages</h2>";

    // Build the new DOM elements programmatically
    var newLine = document.createElement('li');
    var newLink = document.createElement('a');
    var button = document.createElement('button');
    newLink.textContent = title;
    newLine.appendChild(button);
    button.setAttribute('class', 'buttons');
    button.textContent = 'delete';
    newLine.setAttribute('class', 'items');
    newLink.setAttribute('href', url);
    newLink.setAttribute('target', '_blank');   // opens link in new tab
    newLink.setAttribute('tabindex', -1);       // remove focus from links in popup-window
    newLink.setAttribute('id', 'item');
    newLine.appendChild(newLink);
    document.getElementById('list').appendChild(newLine);
    createButtonEvents();
}