如何為動態生成的按鈕編寫onclick函數

Question

我有一些看起來像這樣的按鈕。

這是網站的“白名單”。 我想要按鈕從白名單中刪除相應的網站。

但是，由於這些按鈕是在每次添加一個站點（由用戶輸入）時生成的，因此我不知道如何獲取在函數中使用的ElementID。

這是生成按鈕的位置：

  var cellWebsite = document.createElement("td");
  var website = document.createTextNode(array[i]);

  //append cell text to cell, then cell to row (like setting a "stage")
  cellWebsite.appendChild(website);
  row.appendChild(cellWebsite);

  //create a cell & cell text for BUTTON
  var cellDelete = document.createElement("td");
  var button = document.createElement("BUTTON"); //has its own element
  var text = document.createTextNode("x");
  button.appendChild(text);
  cellDelete.appendChild(button);
  row.appendChild(cellDelete);

如何獲得ID，以便單擊X按鈕時可以編寫函數？ 在該功能內，如何獲得與該按鈕對應的網站？

我正在制作一個Chrome擴展程序，並使用chrome的本地存儲。

Answer 1

最簡單的方法是向事件監聽器添加button變量，如下所示：

const btn = document.createElement('button');
btn.innerText = "Click me!";
btn.addEventListener('click', function(event) {
  console.log('Fired!');
});

Answer 2

我似乎無法發表評論，因為我需要50名代表。 為此，但您不能增加它嗎？ 每次添加時，只需將ID或名稱加1，然后就可以定位ID或名稱。

Answer 3

檢查瀏覽器的檢查視圖，查看是否設置了id和其他屬性。

如果不行，請使用form id屬性，將元素的索引用作var x = document.getElementById（“ myForm”）。elements [0] .value;

如果沒有提供表單ID：

var x = document.forms [0] .id; 或者var x = document.forms.item（0）.id;

Answer 4

動態創建元素時，應使用事件委托來處理事件。

事件委托使您可以避免將事件偵聽器添加到特定節點； 而是將事件偵聽器添加到一個父對象。 該事件偵聽器分析冒泡事件以找到子元素的匹配項。

例：

 var counter = -1; function addRow() { counter++; var table = document.getElementById( 'myTable' ), row = table.insertRow( counter ), cell = row.insertCell( 0 ), cellDelete = row.insertCell( 1 ), button = document.createElement( 'button' ), text = document.createTextNode( 'X' ); cell.innerHTML = 'wikipedia.org ' + counter; button.appendChild( text ); cellDelete.appendChild( button ); button.addEventListener( 'click', function ( e ) { table.deleteRow( e.target.parentNode.parentNode.rowIndex ); counter-- } ) } 

 body { margin: 0 } table { width: 100% } td { padding: 8px; border-bottom: 1px solid #ddd } td:nth-child(even) { text-align: right } tr:nth-child(odd) { background-color: #efefef } 

 <button type="button" onclick="addRow()">Add new row</button> <br> <table id="myTable"></table>