重新创建动态创建的按钮时，onclick事件不会触发

Question

我使用通过分隔列内的表格单元格内容填充的数组在页面上动态创建按钮。这些按钮通过将锚点的innerHTML与单元格内容innerHTML相匹配来过滤表格行，这发生在函数内部。应用此过滤器后，我有一个删除和重建按钮的功能，以便我可以直观地反映正在过滤的表格行和按钮选项。

我的问题是，一旦按钮完成了他们的工作，过滤了表行并被删除并重新构建，onclick和其他表过滤就不再触发了。我有一种预感，也许按钮阵列需要被清除并允许重建，但我已经尝试过，但我什么都没得到。

var hash = window.location.hash.split('+');
/*var sector = hash[0].substring(1);
var service = hash[1];
var client = hash[2];*/
var titleInput = document.getElementById("docSearch");
var docTable = document.getElementById("matrix").getElementsByTagName("table")[0];
var docTableRows = docTable.getElementsByTagName("tr");
var URLpath = window.location.pathname;
var typeContainer = document.getElementById("typeButtons");
var sectorContainer = document.getElementById("sectorButtons");
var serviceContainer = document.getElementById("serviceButtons");
var clientContainer = document.getElementById("clientButtons");
var typeArray =  new Array();
var sectorArray = new Array();
var serviceArray = new Array();
var clientArray = new Array();
var savedTypeTableRows = new Array();
var savedSectorTableRows = new Array();
var savedServiceTableRows = new Array();
var savedClientTableRows = new Array();

/*--------PAGE FUNCTIONS--------*/
function resetPage() {
  window.location = URLpath;
}

/*--------BUTTON FUNCTIONS--------*/

/*----RESET ARRAYS----*/
function resetArrays(){
  typeArray = [];
  sectorArray = [];
  serviceArray = [];
  clientArray = [];  
  savedTypeTableRows = [];
  savedSectorTableRows = [];
  savedServiceTableRows = [];
  savedClientTableRows = [];
}

function resetButtons(){
  resetTypeButtons();
  resetSectorButtons();
  resetServiceButtons();
  resetClientButtons();
}

function createButtons(){
  createTypeButtons();
  createSectorButtons();
  createServiceButtons();
  createClientButtons();
}

/*----TYPE BUTTON CREATION----*/
 function createTypeButtons(){
  for ( var i = 1; i < docTable.rows.length; i++ ) {
    typeArrayCount = docTable.rows[i].cells[1].innerHTML;
    typeArray.push(typeArrayCount); 
  }
  var uniqueTypes = typeArray.filter(function(elem, index, self) {return index == self.indexOf(elem);});
  console.log(uniqueTypes);
  var typeLength = uniqueTypes.length;
  var typeButton;
  for (i = 0; i < typeLength; i++) {
    typeButton = document.createElement('a');
    typeButton.className = 'button cyan filterButton';
    typeButton.innerHTML = uniqueTypes[i];
    typeButton.style.marginRight = "5px";
    typeButton.href = "#" + uniqueTypes[i].replace(" ","%20");
    typeContainer.appendChild(typeButton);
  }
}

/*----BUILD TYPE BUTTONS----*/
createTypeButtons();

/*----CLEAR THE TYPE BUTTONS AND REBUILD----*/
function resetTypeButtons(){
  while (typeContainer.hasChildNodes()) {
    typeContainer.removeChild(typeContainer.lastChild);
  }
  createTypeButtons();
}

/*----FILTER THE TABLE BASED ON TYPE----*/
function typeFilterTable(){
  var typeFilter, typeColumn, i; 
  typeFilter = this.hash.substring(1).toUpperCase(); 
  for (var i = 0; i < docTableRows.length; i++) {
    savedTypeTableRows.push(docTableRows[i]);
  }
  savedTypeTableRows.forEach(function(row){
      var typeColumn = row.getElementsByTagName("td")[1];
       if (typeColumn) {
         var contents = typeColumn.innerHTML.toUpperCase().replace(" ","%20");
         if (contents.indexOf(typeFilter) > -1) {
         /*do nothing*/
         }else{
         row.parentNode.removeChild(row);
         resetArrays();
         resetButtons();
         }
       }
  });   
}

/*----SECTOR BUTTON CREATION----*/
function createSectorButtons(){
  for ( var i = 1; i < docTable.rows.length; i++ ) {
    sectorArrayCount = docTable.rows[i].cells[2].innerHTML;
    sectorArray.push(sectorArrayCount);
  }
  var uniqueSectors = sectorArray.filter(function(elem, index, self) { return index == self.indexOf(elem); });
  console.log(uniqueSectors);
  var sectorLength = uniqueSectors.length;
  var sectorButton;
  for (i = 0; i < sectorLength; i++) {
    sectorButton = document.createElement('a');
    sectorButton.className = 'button cyan filterButton';
    sectorButton.innerHTML = uniqueSectors[i];
    sectorButton.style.marginRight = "5px";
    sectorButton.href = "#" + uniqueSectors[i].replace(" ","%20");
    sectorContainer.appendChild(sectorButton);
  }
}

/*----BUILD SECTOR BUTTONS----*/
createSectorButtons();

/*----CLEAR THE SECTOR BUTTONS AND REBUILD----*/
function resetSectorButtons(){
  while (sectorContainer.hasChildNodes()) {
    sectorContainer.removeChild(sectorContainer.lastChild);
  }
  createSectorButtons();
}

/*----FILTER THE TABLE BASED ON SECTOR----*/
function sectorFilterTable(){
  var sectorFilter, sectorColumn, i; 
  sectorFilter = this.hash.substring(1).toUpperCase();

  for (var i = 0; i < docTableRows.length; i++) {
    savedSectorTableRows.push(docTableRows[i]);
  }
  savedSectorTableRows.forEach(function(row){
      var sectorColumn = row.getElementsByTagName("td")[2];
       if (sectorColumn) {
         var contents = sectorColumn.innerHTML.toUpperCase().replace(" ","%20");
         if (contents.indexOf(sectorFilter) > -1) {
         /*do nothing*/
         }else{
         row.parentNode.removeChild(row);
         resetArrays();
         resetButtons();
         }
       }
  });   
}

/*----SERVICE BUTTON CREATION----*/
 function createServiceButtons(){
  for ( var i = 1; i < docTable.rows.length; i++ ) {
    serviceArrayCount = docTable.rows[i].cells[3].innerHTML;
    serviceArray.push(serviceArrayCount); 
  }
  var uniqueServices = serviceArray.filter(function(elem, index, self) {return index == self.indexOf(elem);});
  console.log(uniqueServices);
  var serviceLength = uniqueServices.length;
  var serviceButton;
  for (i = 0; i < serviceLength; i++) {
    serviceButton = document.createElement('a');
    serviceButton.className = 'button cyan filterButton';
    serviceButton.innerHTML = uniqueServices[i];
    serviceButton.style.marginRight = "5px";
    serviceButton.href = "#" + uniqueServices[i].replace(" ","%20");
    serviceContainer.appendChild(serviceButton);
  }
}

/*----BUILD SERVICE BUTTONS----*/
createServiceButtons();

/*----CLEAR THE SERVICE BUTTONS AND REBUILD----*/
function resetServiceButtons(){
  while (serviceContainer.hasChildNodes()) {
    serviceContainer.removeChild(serviceContainer.lastChild);
  }
  createServiceButtons();
}

/*----FILTER THE TABLE BASED ON SERVICE----*/
function serviceFilterTable(){
  var serviceFilter, serviceColumn, i; 
  serviceFilter = this.hash.substring(1).toUpperCase(); 
  for (var i = 0; i < docTableRows.length; i++) {
    savedServiceTableRows.push(docTableRows[i]);
  }
  savedServiceTableRows.forEach(function(row){
      var serviceColumn = row.getElementsByTagName("td")[3];
       if (serviceColumn) {
         var contents = serviceColumn.innerHTML.toUpperCase().replace(" ","%20");
         if (contents.indexOf(serviceFilter) > -1) {
         /*do nothing*/
         }else{
         row.parentNode.removeChild(row);
         resetArrays();
         resetButtons();
         }
       }
  });   
}

/*----CLIENT BUTTON CREATION----*/
 function createClientButtons(){
  for ( var i = 1; i < docTable.rows.length; i++ ) {
    clientArrayCount = docTable.rows[i].cells[4].innerHTML;
    clientArray.push(clientArrayCount); 
  }
  var uniqueClients = clientArray.filter(function(elem, index, self) {return index == self.indexOf(elem);});
  console.log(uniqueClients);
  var clientLength = uniqueClients.length;
  var clientButton;
  for (i = 0; i < clientLength; i++) {
    clientButton = document.createElement('a');
    clientButton.className = 'button cyan filterButton';
    clientButton.innerHTML = uniqueClients[i];
    clientButton.style.marginRight = "5px";
    clientButton.href = "#" + uniqueClients[i].replace(" ","%20");
    clientContainer.appendChild(clientButton);
  }
}

/*----BUILD CLIENT BUTTONS----*/
createClientButtons();

/*----CLEAR THE CLIENT BUTTONS AND REBUILD----*/
function resetClientButtons(){
  while (clientContainer.hasChildNodes()) {
    clientContainer.removeChild(clientContainer.lastChild);
  }
  createClientButtons();
}

/*----FILTER THE TABLE BASED ON CLIENT----*/
function clientFilterTable(){
  var clientFilter, clientColumn, i; 
  clientFilter = this.hash.substring(1).toUpperCase(); 
  for (var i = 0; i < docTableRows.length; i++) {
    savedClientTableRows.push(docTableRows[i]);
  }
  savedClientTableRows.forEach(function(row){
      var clientColumn = row.getElementsByTagName("td")[4];
       if (clientColumn) {
         var contents = clientColumn.innerHTML.toUpperCase().replace(" ","%20");
         if (contents.indexOf(clientFilter) > -1) {
         /*do nothing*/
         }else{
         row.parentNode.removeChild(row);
         resetArrays();
         resetButtons();
         }
       }
  });   
}


/*----TYPE BUTTON CLICK DETECT----*/
var allTypeFilterButtons = typeContainer.getElementsByClassName("filterButton");
for (i = 0; i < allTypeFilterButtons.length; i++) {
  typeFilterButtons = allTypeFilterButtons[i];
  typeFilterButtons.addEventListener('click', typeFilterTable);
}

/*----SECTOR BUTTON CLICK DETECT----*/
var allSectorFilterButtons = sectorContainer.getElementsByClassName("filterButton");
for (i = 0; i < allSectorFilterButtons.length; i++) {
  sectorFilterButtons = allSectorFilterButtons[i];
  sectorFilterButtons.addEventListener('click', sectorFilterTable);
}

/*----SERVICE BUTTON CLICK DETECT----*/
var allServiceFilterButtons = serviceContainer.getElementsByClassName("filterButton");
for (i = 0; i < allServiceFilterButtons.length; i++) {
  serviceFilterButtons = allServiceFilterButtons[i];
  serviceFilterButtons.addEventListener('click', serviceFilterTable);
}

/*----CLIENT BUTTON CLICK DETECT----*/
var allClientFilterButtons = clientContainer.getElementsByClassName("filterButton");
for (i = 0; i < allClientFilterButtons.length; i++) {
  clientFilterButtons = allClientFilterButtons[i];
  clientFilterButtons.addEventListener('click', clientFilterTable);
}

https://jsfiddle.net/Sideburnt/t9rrevto/