我希望我的js每当用户添加姓名缩写时都添加一行。我的代码在用户第一次输入姓名缩写时起作用，第一行下将创建一个新行，但此后不再添加。我不确定我需要做什么。
我的JS代码：
(function(){
var counter = 1;
$("#preformedBy").change(function(){
$('#timeStamp').html(new Date().toLocaleString());
$('#harvestedCannabis > tbody:last-child').append('<tr><td><input type="number" id="toteNum" readonly></td><td><input type="number" step=".1">' +
'</td><td><input type="number" step=".1"></td><td><input type="number" step=".1"></td><td><input type="number" step=".1"></td><td>' +
'<input type="text"></td><td><input type="text" id="preformedBy"></td><td id="timeStamp"><input type="text" readonly></td></tr>');
counter = counter + 1;
$('#toteNum').html(counter)
})
});
我的HTML：
<table id="harvestedCannabis">
<tr>
<th>Tote #</th>
<th>Flowers</th>
<th>Trim A</th>
<th>Trim B</th>
<th>Waste</th>
<th>Originating Line(A,B,C)</th>
<th>Preformed By</th>
<th>Time Stamp</th>
</tr>
<tr>
<td id="toteNum"><input type="number" value="1" readonly></td>
<td><input type="number" step=".1"></td>
<td><input type="number" step=".1"></td>
<td><input type="number" step=".1"></td>
<td><input type="number" step=".1"></td>
<td><input type="text"></td>
<td><input type="text" id="preformedBy"></td>
<td id="timeStamp"><input type="text" readonly></td>
</tr>
</table>
我希望表格在插入首字母后自动根据用户要求多次追加新行
最佳答案
您的代码有两个主要问题。我会解释它们，但是首先看一下我用您的代码制作的这个小提琴，该版本实际上有效：
https://jsfiddle.net/49Ln0qcf/#&togetherjs=2hdIlfBaC0
现在，让我们探究您出了错的地方：
1。
您正在监听onChange事件的ID属性。第一次使用它是因为在那个时候您只有一个id为“ preformedBy”的元素，但是在添加第二行之后，您将拥有两个具有相同ID的元素。 jQuery正在监听dom中ID的第一个实例，因此不会监听您的其他输入字段。因此，将您的id属性替换为一个类，然后.preformedBy选择器将在第二次迭代后继续工作。
2。
仅采取上述步骤将无法修复您的代码。为了获得比第一次迭代更多的效果，您需要收听.preformedBy类的父元素。在您的代码中，您像这样直接监听preformedBy：
$("#preformedBy").change(function(){
这里的问题是，在页面加载时，jquery只知道页面加载时存在的dom元素，因此是preformedBy的第一个也是唯一的实例。因此，jQuery将继续侦听该元素，并且仅继续侦听该元素，因为它不知道您在页面加载后添加到dom中的所有元素。为了使jQuery能够监听preformedBy的所有实例，您需要监听父选择器。请注意，在我的代码中，我正在像这样监听preformedBy：
$("#harvestedCannabis").on('change', '.preformedBy', function(){
关键区别在于我的代码侦听父元素上的更改事件，但专门侦听该父元素内所有“ .preformedBy”事件。正如您的代码正在使用preformedBy选择器监听唯一元素一样。
我希望这有帮助。
有效的最终代码：
的HTML：
<table id="harvestedCannabis">
<tr>
<th>Tote #</th>
<th>Flowers</th>
<th>Trim A</th>
<th>Trim B</th>
<th>Waste</th>
<th>Originating Line(A,B,C)</th>
<th>Preformed By</th>
<th>Time Stamp</th>
</tr>
<tr>
<td id="toteNum1"><input type="number" value="1" readonly></td>
<td><input type="number" step=".1"></td>
<td><input type="number" step=".1"></td>
<td><input type="number" step=".1"></td>
<td><input type="number" step=".1"></td>
<td><input type="text"></td>
<td><input type="text" class="preformedBy"></td>
<td id="timeStamp1"><input type="text" readonly></td>
</tr>
</table>
jQuery的：
var counter = 1;
$("#harvestedCannabis").on('change', '.preformedBy', function(){
$('#timeStamp'+counter).html(new Date().toLocaleString());
$('#harvestedCannabis > tbody:last-child').append('<tr><td><input type="number" id="toteNum'+(counter + 1)+'" readonly></td><td><input type="number" step=".1">' +
'</td><td><input type="number" step=".1"></td><td><input type="number" step=".1"></td><td><input type="number" step=".1"></td><td>' +
'<input type="text"></td><td><input type="text" class="preformedBy"></td><td id="timeStamp'+(counter + 1)+'"><input type="text" readonly></td></tr>');
$('#toteNum'+(counter + 1)).val(counter + 1);
counter = counter + 1;
});