通過EventListener調用JS方法

Question

我有一個JS函數，可以動態創建一組按鈕。 這些按鈕被放置在行中，以便每次單擊按鈕時，都需要將該特定行添加到該部門下方的另一個表中。

我能夠僅將原始表的第一行成功添加到check分區下面的預期表中。 其他所有人都沒有工作。 我不確定為什么沒有為所有“ 選擇”按鈕調用事件監聽器。

動態創建原始表

for(var q=0;q<attributesNameArray.length;q++)
{
    var chkID = "chkID"+elementID+attributesNameArray[q];
    var aggComboID = "Aggregate-Combo"+q;
    var attrNameID = "attrName"+q;
    var attrTypeID = "attrType"+q;
    var btnID = q+"addSelectedColumnBtn";
    chkname = attributesNameArray[q];
    chkVal = attributesDataTypeArray[q];

    var asNameLbl = "usr"+q;
    asNameid = asNameLbl;

    $("#tableSelectedAttributes").append(
            "<tr>"+
                "<td id='"+attrNameID+"'>"+attributesNameArray[q]+"</td>"+
                "<td id='"+attrTypeID+"'>"+attributesDataTypeArray[q]+"</td>"+
                "<td><input type='text' id='"+asNameid+"'></td>"+
                "<td>"+
                    "<select id='"+aggComboID+"' name='Aggregate-Combo' class='form-control'>"+
                        "<option value='Select an option'>Select an option</option>"+
                        "<option value='MIN'>MIN</option>"+
                        "<option value='MAX'>MAX</option>"+
                        "<option value='SUM'>SUM</option>"+
                        "<option value='AVG'>AVG</option>"+
                        "<option value='COUNT'>COUNT</option>"+
                    "</select>"+
                "</td>"+
                "<td><button id='addSelectedColumnBtn' name='"+btnID+"' class='btn btn-info'>Select</button></td>"+
            "</tr>"+
          "</div>"
     );
}
...

document.getElementById("addSelectedColumnBtn").addEventListener("click", function() {
    displaySelectedColumns(this,fromNameSt);
}, false);

displaySelectedColumns（this，fromNameSt）

   function displaySelectedColumns(sender,fromNameSt)
   {
       var clickedelemId=sender.name;
       q = clickedelemId.charAt(0);


       var aggComboID = "Aggregate-Combo"+q;
       var attrNameID = "attrName"+q;
       var attrTypeID = "attrType"+q;
       var asNameLbl = "usr"+q;
       var selTableId1 = "sel1"+selectedColumnCount;
       var selTableId2 = "sel2"+selectedColumnCount;
       var selTableId3 = "sel3"+selectedColumnCount;
       var selTableId4 = "sel4"+selectedColumnCount;

       var attributeName = document.getElementById(attrNameID).innerText;
       var attributeType = document.getElementById(attrTypeID).innerHTML;
       var selectedAsName = document.getElementById(asNameLbl).value;
       var choice=document.getElementById(aggComboID);
       var selectedAggregate = choice.options[choice.selectedIndex].text;

       alert(attributeName+" "+attributeType+" "+selectedAsName+" "+selectedAggregate);

       if(selectedAggregate == "Select an option")
       {
           if(selectedAsName == "" || selectedAsName == " " || selectedAsName == "null" || selectedAsName == "undefined" ||selectedAsName == null || selectedAsName == undefined)
           {
               alert("As name: false");
               $("#displaySelectedColumnTable").append(
                       "<tr>"+
                       "<td id='"+selTableId1+"'>"+attributeName+"</td>"+
                       "<td id='"+selTableId2+"'>"+attributeType+"</td>"+
                       "<td id='"+selTableId3+"'></td>"+
                       "<td id='"+selTableId4+"'></td>"+
                       "</tr>"
               );
           }
           else
           {
               $("#displaySelectedColumnTable").append(
           ...

在這方面的任何建議將不勝感激。

Answer 1

ID必須在您的html頁面上唯一，每個按鈕都重復addSelectedColumnBtn 。

首先，通過添加為select元素添加的相同q變量，使其成為唯一的ID。

"<td><button id='addSelectedColumnBtn_" + q + "' name='"+btnID+"' class='btn btn-info'>Select</button></td>"+

現在僅在所有按鈕的for循環中調用此addEventListener

document.getElementById("addSelectedColumnBtn_" + q).addEventListener("click", function() {
    displaySelectedColumns(this,fromNameSt);
}, false);