如何使用 javascript 將 onclick 事件分配給動態創建的按鈕

Question

我有一個 function 可以創建動態按鈕並為其分配唯一的id和文本值。 它們在 UI 上創建和渲染得很好，但我希望能夠為它們分配單獨onclick事件偵聽器。 以下是有問題的邏輯：

function createLinkButtons(){
      for(var i = 0; i < currentOrder.links.length; i++){
        currentLink = currentOrder.links[i]
        var currentHTML = linksButtonsDiv.innerHTML;
        linksButtonsDiv.innerHTML = currentHTML + 
        `
        <button type="button" id="${currentLink.rel}">${currentLink.rel}</button>
        `
        
        var button = new Object();

        button = document.getElementById(currentLink.rel) //<-- gets overwritten by the next loop iteration
        
        var rel = currentLink.rel;

        //onclick function should receive param argument to know how to proceed accordingly
        button.onclick = function(rel){
          console.log("it workded"); 
        }

      }
    }

有趣的是，我可以將onclick事件設置為創建的最后一個按鈕。 這是因為創建的最后一個按鈕“保留”了onclick參考。 如何在 memory 中保持之前對按鈕的所有引用，以便在我單擊它們時它們也會做出反應？

我看過其他帖子，其中動態創建的按鈕被動態分配給onclick事件，但 function 只是一個簽名，不接受參數參數。 在調用 onclick 事件時，我需要包含一個 param 參數。 有沒有辦法做到這一點？

Answer 1

實際上你的代碼有問題，因為一旦你創建了一個按鈕，將它注入 DOM 並附加一個事件，那么循環的下一次迭代只是刪除它並創建一個新的按鈕實例（具有相同的 id） .

要修復它，您不應修改整個 HTML 而是動態修改 append 子項：初始代碼：

linksButtonsDiv.innerHTML = currentHTML + 
`<button type="button" id="${currentLink.rel}">${currentLink.rel}</button>`

新代碼：

let button= document.createElement("button");
button.setAttribute('id', currentLink.rel);
button.innerHTML = currentLink.rel;
linksButtonsDiv.parentNode.appendChild(button);
function onClick() {
   console.log("it workded");
}
button.addEventListener("click", onClick, false);

PS：這是一個細節，但這不是最有效的方法，最好在 DOM 中一次按下所有按鈕，然后附加事件。

Answer 2

嘗試使用let而不是var

for(let i = 0; i < currentOrder.links.length; i++){
    ...

var是 function 范圍

let是塊作用域

在這種情況下使用var時，循環內的所有JQuery讀取i變量的最后定義值，即currentOrder.links.length - 1 - 這就是最后一個按鈕起作用的原因