Dynamische Zeile mit Dropdown-Kontrollkästchen funktioniert nicht

Question

Ich habe ein HTML-Formular, das ein Benutzer Zeilen hinzufügen und löschen kann, wie benötigt. Dieser Teil funktioniert wie es sollte. Ein Teil der Zeile ist ein Dropdown mit Kontrollkästchen. Dies funktioniert auch so, wie es sollte. Das Problem ist, wenn der Benutzer auf die Schaltfläche Hinzufügen klickt, um eine neue Zeile hinzuzufügen, funktioniert das Dropdown-Kontrollkästchen nicht in der neuen Zeile.

Entschuldigung, die Codeblöcke sind so lang, ich will nur sichergehen, dass ich nicht etwas so Offensichtliches hinter mir lasse. Vielen Dank im Voraus für jede Hilfe, ich bin relativ neu in all dem.

Fiddle

HTML CODE

<h2>Please fill in the information below</h2> 
     <form action="pmUnitCreate.php" method="post"> 
      <p>Click the Add button to add a new row. Click the Delete button to Delete last row.</p> 

      <input type="button" id="btnAdd" class="button-add" onClick="addRow('myTable')" value="Add"/> 
      <input type="button" id="btnDelete" class="button-delete" onClick="deleteRow('myTable')" value="Delete"/> 



      <br> 

      <table id="myTable" class="form"> 

       <tr id="heading"> 
       <th><b><font size="4">Job Number</font></b></th> 
       <th><b><font size="4">Unit Number</font></b></th> 
       <th><b><font size="4">Job Code</font></b></th> 
       <th><b><font size="4">Model Number</font></b></th> 
       <th><b><font size="4">Scope</font></b></th> 
       </tr> 

       <tr id="tableRow"> 
        <td> 
         <input type="text" name="JobNumber[]" value="<?php echo $JobNumber;?>" readonly> 
        </td> 

        <td> 
         <input type="text" name="UnitID[]" value="<?php echo $JobNumber;?>-01" readonly> 
        </td> 

        <td> 
         <select name="JobCode[]" style="background-color:#FFE68C" required> 
          <option></option> 
          <option>F</option> 
          <option>FS</option> 
          <option>PD</option> 
          </select> 
        </td> 

        <td> 
         <input type="text" name="ModelNumber[]" style="background-color:#FFE68C" required> 
        </td> 

     <td> 
       <div id="Scope[]" class="dropdown-check-list" tabindex="100"> 
       <span class="anchor" style="background-color:#FFE68C">Select Scope</span> 
       <ul id="items" class="items"> 
      <input type="checkbox" name="S1" value="100OA"/><font size="4">100OA</font> 
      <input type="checkbox" name="S2" value="BTank"/><font size="4">BTank</font> 
      <input type="checkbox" name="S3" value="WSEcon"/><font size="4">WSEcon</font> 
       <input type="checkbox" name="S4" value="NetPkg"/><font size="4">NetPkg</font> 
       <input type="checkbox" name="S5" value="CstmCtrl"/><font size="4">CstmCtrl</font> 
       <br><br> 
       <input type="checkbox" name="S6" value="CstmRef"/><font size="4">CstmRef</font> 
       <input type="checkbox" name="S7" value="CstmSM"/><font size="4">CstmSM</font> 
        <input type="checkbox" name="S8" value="CstmHV"/><font size="4">CstmHV</font> 
        <input type="checkbox" name="S9" value="CPCTrl"/><font size="4">CPCtrl</font> 
        <input type="checkbox" name="S10" value="DesiHW"/><font size="4">DesiHW</font> 
        <br><br> 
      <input type="checkbox" name="S11" value="DigScroll"/><font size="4">DigScroll</font> 
      <input type="checkbox" name="S12" value="DFGas"/><font size="4">DFGas</font> 
       <input type="checkbox" name="S13" value="DWall"/><font size="4">DWall</font> 
       <input type="checkbox" name="S14" value="MZ-DD"/><font size="4">MZ-DD</font> 
       <input type="checkbox" name="S15" value="DPP"/><font size="4">DPP</font> 
       <input type="checkbox" name="S16" value="Encl"/><font size="4">Encl</font> 
       <br><br> 
       <input type="checkbox" name="S17" value="PlateHX"/><font size="4">PlateHX</font> 
        <input type="checkbox" name="S18" value="ERW"/><font size="4">ERW</font> 
        <input type="checkbox" name="S19" value="ERWModule"/><font size="4">ERWModule</font> 
        <input type="checkbox" name="S20" value="ERVMod"/><font size="4">ERVMod </font> 
      <input type="checkbox" name="S21" value="EvapBP"/><font size="4">EvapBP</font> 
      <br><br> 
      <input type="checkbox" name="S22" value="PreEvap"/><font size="4">PreEvap</font> 
       <input type="checkbox" name="S23" value="XP"/><font size="4">XP</font> 
       <input type="checkbox" name="S24" value="Extended"/><font size="4">Extend</font> 
       <input type="checkbox" name="S25" value="FanWall"/><font size="4">FanWall</font> 
       <input type="checkbox" name="S26" value="FillStat"/><font size="4">FillStat</font> 
        <input type="checkbox" name="S27" value="FFilt"/><font size="4">FFilt</font> 
        <br><br> 
        <input type="checkbox" name="S28" value="PFilt"/><font size="4">PFilt</font> 
        <input type="checkbox" name="S29" value="CarbFilt"/><font size="4">CarbFilt</font> 
        <input type="checkbox" name="S30" value="CustFilt"/><font size="4">CustFilt </font> 
      <input type="checkbox" name="S31" value="MGH(H)"/><font size="4">MGH(H)</font> 
      <input type="checkbox" name="S32" value="GHeat"/><font size="4">GHeat</font> 
      <br><br> 
       <input type="checkbox" name="S33" value="HighStatic"/><font size="4">HighStatic</font> 
       <input type="checkbox" name="S34" value="HGBP"/><font size="4">HGBP</font> 
       <input type="checkbox" name="S35" value="HGRH"/><font size="4">HGRH</font> 
       <input type="checkbox" name="S36" value="HPConv"/><font size="4">HPConv</font> 
        <input type="checkbox" name="S37" value="GFHumid"/><font size="4">GFHumid</font> 
        <br><br> 
        <input type="checkbox" name="S38" value="TOHumid"/><font size="4">TOHumid</font> 
        <input type="checkbox" name="S39" value="MHGRH"/><font size="4">MHGRH</font> 
        <input type="checkbox" name="S40" value="LowAF"/><font size="4">LowAF</font> 
      <input type="checkbox" name="S41" value="LowAFSF"/><font size="4">LowAFSF</font> 
      <input type="checkbox" name="S42" value="LowAmbient"/><font size="4">LowAmbient</font> 
      <br><br> 
       <input type="checkbox" name="S43" value="MEHeat(R)"/><font size="4">MEHeat(R)</font> 
       <input type="checkbox" name="S44" value="MEHeat(I)"/><font size="4">MEHeat(I)</font> 
       <input type="checkbox" name="S45" value="MGH(R)"/><font size="4">MGH(R)</font> 
       <input type="checkbox" name="S46" value="MGH(H)"/><font size="4">MGH(H)</font> 
        <input type="checkbox" name="S47" value="MtrRR"/><font size="4">MtrRR</font> 
        <br><br> 
        <input type="checkbox" name="S48" value="MotorGM"/><font size="4">MotorGM</font> 
        <input type="checkbox" name="S49" value="MZ-Mod"/><font size="4">MZ-Mod</font> 
        <input type="checkbox" name="S50" value="NatConv"/><font size="4">NatConv</font> 
      <input type="checkbox" name="S51" value="OAFMS"/><font size="4">OAFMS</font> 
      <input type="checkbox" name="S52" value="OSMotor"/><font size="4">OSMotor</font> 
      <br><br> 
       <input type="checkbox" name="S53" value="MZ-VAV"/><font size="4">MZ-VAV</font> 
       <input type="checkbox" name="S54" value="Mon"/><font size="4">Mon</font> 
       <input type="checkbox" name="S55" value="PumpPkg"/><font size="4">PumpPkg</font> 
       <input type="checkbox" name="S56" value="PipePkg"/><font size="4">PipePkg</font> 
        <input type="checkbox" name="S57" value="ServLite"/><font size="4">ServLite</font> 
        <br><br> 
        <input type="checkbox" name="S58" value="SparkRes"/><font size="4">SparkRes</font> 
        <input type="checkbox" name="S59" value="SSLube"/><font size="4">SSLube</font> 
        <input type="checkbox" name="S60" value="UVLights"/><font size="4">UVLights</font> 
      <input type="checkbox" name="S61" value="VSComp"/><font size="4">VSComp</font> 
      <br><br> 
      <input type="checkbox" name="S62" value="LCVAV"/><font size="4">LCVAV</font> 
       <input type="checkbox" name="S63" value="XFVAV"/><font size="4">XFVAV</font> 
       <input type="checkbox" name="S64" value="WCCond"/><font size="4">WCCond</font> 
       <input type="checkbox" name="S65" value="WSHPConv"/><font size="4">WSHPConv</font> 
       <input type="checkbox" name="S66" value="3RConv"/><font size="4">3RConv</font> 
       <br><br> 
        <input type="checkbox" name="S67" value="WiringGM"/><font size="4">WiringGM</font> 
        <input type="checkbox" name="S68" value="XFan"/><font size="4">XFan</font> 
        <input type="checkbox" name="S69" value="RFan"/><font size="4">RFan</font> 
        <input type="checkbox" name="S70" value="SFan"/><font size="4">SFan</font> 
      <input type="checkbox" name="S71" value="OAHood"/><font size="4">OAHood</font> 
      <br><br> 
      <input type="checkbox" name="S72" value="XAHood"/><font size="4">XAHood</font> 
       <input type="checkbox" name="S73" value="XALouver"/><font size="4">XALouver</font> 
       <input type="checkbox" name="S74" value="OALouver"/><font size="4">OALouver</font> 
       <input type="checkbox" name="S75" value="SteamCoil"/><font size="4">SteamCoil</font> 
       <input type="checkbox" name="S76" value="HWCoil"/><font size="4">HWCoil</font> 
       <br><br> 
        <input type="checkbox" name="S77" value="CHWCoil"/><font size="4">CHWCoil</font> 
        <input type="checkbox" name="S78" value="CondCoil"/><font size="4">CondCoil</font> 
        <input type="checkbox" name="S79" value="DXCoil"/><font size="4">DXCoil</font> 
        <input type="checkbox" name="S80" value="F&BP"/><font size="4">F&BP</font> 
      <input type="checkbox" name="S81" value="Xfrmr"/><font size="4">Xfrmr</font> 
      </ul> 
      </div> 
      </td>    




       </tr> 

      </table> 

JS-Code

   <script> 

function incrementUnitId(unitId) { 
    var arr = unitId.split('-'); 
    if (arr.length === 1) {return;} // The unit id is not valid; 
    var number = parseInt(arr[1]) + 1; 
    return arr[0] + '-' + (number < 10 ? 0 : '') + number; 
    } 

function addRow() {     
    var row = document.getElementById("tableRow"); // find row to copy 
    var table = document.getElementById("myTable"); // find table to append to 
    var clone = row.cloneNode(true); // copy children too 
    row.id = "oldRow"; // We want to take the last value inserted 
    clone.cells[1].childNodes[1].value = incrementUnitId(clone.cells[1].childNodes[1].value) 
    table.appendChild(clone); // add new row to end of table 
    } 


function deleteRow() { 
    document.getElementById("myTable").deleteRow(-1); 
    } 

var checkList = document.getElementById('Scope[]'); 
var items = document.getElementById('items'); 
    checkList.getElementsByClassName('anchor')[0].onclick = function (evt) { 
     if (items.classList.contains('visible')){ 
      items.classList.remove('visible'); 
      items.style.display = "none"; 
     } 

     else{ 
      items.classList.add('visible'); 
      items.style.display = "block"; 
     } 


    } 

    items.onblur = function(evt) { 
     items.classList.remove('visible'); 
    } 
      </script> 

Answer 1

Ich glaube, Ihr Problem mit Ereignisbindung zu tun hat. Sie fügen HTML dynamisch hinzu und daher müssen Ereignisse daran gebunden sein, um ausgelöst zu werden. Die Antwort auf diese Frage kann Ihnen helfen: Event binding on dynamically created elements?