javascript - JS 函数只追加一行

Question

我希望我的 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>    

我希望表格在用户插入首字母后自动根据用户需要多次添加新行

Answer 1

您的代码有两个主要问题。我会解释它们，但首先看看我用你的代码制作的这个 fiddle ，这个版本确实有效: 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;
});