我正在使用所选的jQuery插件。我按照自己的意愿工作。我的问题是将它与动态表一起使用。初始行有效，但是当向表中添加新行时，新添加的行不起作用。我确实在这里找到了一个关于使用.on的问题，但我完全不知道如何解决这个问题。
所选插件的jQuery代码
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/chosen.jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/chosen.css" />
<script>
$(function() {
$(".chzn-select").chosen();
});
</script>
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>
<select class="chzn-select" multiple="true" data-placeholder="Select Scope's" name="Scope[]" style="width:300px;" required>
<option value="100OA">100OA</option>
<option value="BTank">BTank</option>
<option value="WSEcon">WSEcon</option>
<option value="NetPkg">NetPkg</option>
<option value="CstmCtrl">CstmCtrl</option>
<option value="CstmFef">CstmRef</option>
<option value="CstmSM">CstmSM</option>
<option value="CstmHV">CstmHV</option>
<option value="CPCtrl">CPCtrl</option>
<option value="DesiHW">DesiHW</option>
<option value="DigScroll">DigScroll</option>
<option value="DigScroll">DFGas</option>
<option value="DWall">DWall</option>
<option value="MZ-DD">MZ-DD</option>
<option value="DPP">DPP</option>
<option value="Encl">Encl</option>
<option value="PlateHX">PlateHX</option>
<option value="ERW">ERW</option>
<option value="ERWModule">ERWModule</option>
<option value="ERVMod">ERVMod</option>
<option value="EvapBP">EvapBP</option>
<option value="PreEvap">PreEvap</option>
<option value="XP">XP</option>
<option value="Extend">Extend</option>
<option value="FanWall">FanWall</option>
<option value="FillStat">FillStat</option>
<option value="FFilt">FFilt</option>
<option value="PFilt">PFilt</option>
<option value="CarbFilt">CarbFilt</option>
<option value="CustFilt">CustFilt</option>
<option value="MGH(H)">MGH(H)</option>
<option value="GHeat">GHeat</option>
<option value="HighStatic">HighStatic</option>
<option value="HGBP">HGBP</option>
<option value="HGRH">HGRH</option>
<option value="HPConv">HPConv</option>
<option value="GFHumid">GFHumid</option>
<option value="TOHumid">TOHumid</option>
<option value="MHGRH">MHGRH</option>
<option value="LowAF">LowAF</option>
<option value="LowAFSF">LowAFSF</option>
<option value="LowAmbient">LowAmbient</option>
<option value="MEHeat(R)">MEHeat(R)</option>
<option value="MEHeat(I)">MEHeat(I)</option>
<option value="HGH(R)">MGH(R)</option>
<option value="MGH(H)">MGH(H)</option>
<option value="MtrRR">MtrRR</option>
<option value="MotorGM">MotorGM</option>
<option value="MS-Mod">MZ-Mod</option>
<option value="NatConv">NatConv</option>
<option value="OAFMS">OAFMS</option>
<option value="OSMotor">OSMotor</option>
<option value="MZ-VAV">MZ-VAV</option>
<option value="Mon">Mon</option>
<option value="PumpPkg">PumpPkg</option>
<option value="PipePkg">PipePkg</option>
<option value="ServLite">ServLite</option>
<option value="SparkRes">SparkRes</option>
<option value="SSLube">SSLube</option>
<option value="UVLights">UVLights</option>
<option value="VSComp">VSComp</option>
<option value="LCVAV">LCVAV</option>
<option value="XFVAV">XFVAV</option>
<option value="WCCond">WCCond</option>
<option value="WSHPConv">WSHPConv</option>
<option value="3RConv">3RConv</option>
<option value="WiringGM">WiringGM</option>
<option value="XFan">XFan</option>
<option value="RFan">RFan</option>
<option value="SFan">SFan</option>
<option value="OAHood">OAHood</option>
<option value="XAHood">XAHood</option>
<option value="XALouver">XALouver</option>
<option value="OALouver">OALouver</option>
<option value="SteamCoil">SteamCoil</option>
<option value="HWCoil">HWCoil</option>
<option value="CHWCoil">CHWCoil</option>
<option value="CondCoil">CondCoil</option>
<option value="DXCoil">DXCoil</option>
<option value="F&BP">F&BP</option>
<option value="Xfrmr">Xfrmr</option>
<option value="WCCond">WCCond</option>
<option value="PLFrHX">PlFrHX</option>
</select>
</td>
</table>
用于向表中添加行的JS代码
<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);
}
</script>