JQuery函数在我的表中的另一行被动态生成后不起作用

Question

我有一个输入表单，当单击添加按钮时，它会提交当前数据行，然后添加一行新的输入字段以输入更多数据。当我单击添加按钮时，它将把第一个输入数据发布到数据库中，并创建一个新行。然而，当我尝试提交第二行时，什么也没发生。未提交数据，也未添加另一行。

这是我的jquery点击功能

$('#addRow').click(function(e) {
const cloneRow = $('#tableData tbody tr').first();
e.preventDefault();
let data = {
project_id: $(".project_id").last().val(),
imp_or_ann: $(".imp_or_ann").last().val(),
category: $(".category").last().val(),
cost: $(".cost").last().val(),
hours: $(".hours").last().val()
}
$.ajax({
url: '/costs_hours',
type: 'POST',
data: data
}).then(
cloneRow.clone().appendTo('#tableData tbody').find(".cost, .hours").val(''),
$("#next").removeAttr('disabled'),
$("#link").attr('href', '/fundings')
)
})

这是我从输入的信息

<table id="tableData" class="table text-light text-center mt-3">
<thead>
<tr>
<th scope="col">Project ID</th>
<th scope="col">Implementation or Annual</th>
<th scope="col">Category</th>
<th scope="col">Costs</th>
<th scope="col">Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="input-group mb-3">
<input name="project_id" type="text" class="form-control project_id">
</div>
</td>
<td>
<div class="input-group mb-3">
<div class="input-group mb-3">
<select name="imp_or_ann" class="form-select imp_or_ann"
id="inputGroupSelect01">
<option disabled selected>Choose...</option>
<option>Implementation</option>
<option>Annual</option>
</select>
</div>
</div>
</td>
<td>
<div class="input-group mb-3">
<div class="input-group mb-3">
<select name="category" class="form-select category" id="inputGroupSelect01">
<option disabled selected>Choose...</option>
<option>EMO</option>
<option>Analysts</option>
<option>Maintenance</option>
<option>ETS</option>
<option>BOT</option>
<option>OtherUT</option>
<option>Materials</option>
<option>Non-UT Contract</option>
<option>Contingency</option>
</select>
</div>
</div>
</td>
<td>
<div class="input-group mb-3">
<input name="cost" type="text" class="cost form-control">
</div>
</td>
<td>
<div class="input-group mb-3">
<input name="hours" type="text" class="hours form-control">
</div>
</td>
<td>
<button id='addRow' type="button" style="background-color: #bf5700;"
class="btn btn-warning text-light"><i
class="fas fa-plus-circle"></i>&nbsp;Add</button>
</td>
</tr>
</tbody>
</table>

我希望该按钮保持在中，这样用户就知道他们必须单击添加按钮才能添加该数据。但这目前只适用于第一个数据输入。当添加第二行时，按钮不起作用，我无法提交数据，并且没有创建另一行。非常感谢任何建议！

Answer 1

$('#addRow')在执行JS代码时求值一次。

当您克隆并添加新行时，您实际上是用id="addRow"创建了一个新的(不同的！(元素。THAT元素没有侦听单击事件的处理程序。

相反，您需要使用jquery$.on((：将监听器放在不变的东西上，例如#tableData

$('#tableData').on('click', '.addRow', function(e){
...
});

通过这种方式，listing的元素是#tableData，它获得点击，然后检查点击是否源于与.addRow匹配的东西。您的实际功能无需更改。

但是，您需要将添加按钮从id="addRow"更改为class="addRow"(或者使用name属性或其他任何东西(，这样DOM中就不会有多个ID相同的元素。

Answer 2

您为多个对象设置了相同的ID，这是有问题的，但您真正需要的是在静态父对象上设置侦听器(我使用了tableData(。我将你的按钮ID更改为类，这样它就可以应用于所有添加按钮。

您的侦听器已设置为扫描页面以查找button#addRow并附加一个侦听器。然后创建按钮的一个新实例，但侦听器设置已经启动，并且不知道新创建的实例。相反，将侦听器设置在静态父级上。事件为on，参数为click以检测单击，参数为button.addRow以指定侦听器关注的元素。

$('#tableData').on('click', 'button.addRow', function(e) {
const cloneRow = $('#tableData tbody tr').first();
e.preventDefault();
let data = {
project_id: $(".project_id").last().val(),
imp_or_ann: $(".imp_or_ann").last().val(),
category: $(".category").last().val(),
cost: $(".cost").last().val(),
hours: $(".hours").last().val()
}
$.ajax({
url: '/costs_hours',
type: 'POST',
data: data
}).then(
cloneRow.clone().appendTo('#tableData tbody').find(".cost, .hours").val(''),
$("#next").removeAttr('disabled'),
$("#link").attr('href', '/fundings')
)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableData" class="table text-light text-center mt-3">
<thead>
<tr>
<th scope="col">Project ID</th>
<th scope="col">Implementation or Annual</th>
<th scope="col">Category</th>
<th scope="col">Costs</th>
<th scope="col">Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="input-group mb-3">
<input name="project_id" type="text" class="form-control project_id">
</div>
</td>
<td>
<div class="input-group mb-3">
<div class="input-group mb-3">
<select name="imp_or_ann" class="form-select imp_or_ann" id="inputGroupSelect01">
<option disabled selected>Choose...</option>
<option>Implementation</option>
<option>Annual</option>
</select>
</div>
</div>
</td>
<td>
<div class="input-group mb-3">
<div class="input-group mb-3">
<select name="category" class="form-select category" id="inputGroupSelect01">
<option disabled selected>Choose...</option>
<option>EMO</option>
<option>Analysts</option>
<option>Maintenance</option>
<option>ETS</option>
<option>BOT</option>
<option>OtherUT</option>
<option>Materials</option>
<option>Non-UT Contract</option>
<option>Contingency</option>
</select>
</div>
</div>
</td>
<td>
<div class="input-group mb-3">
<input name="cost" type="text" class="cost form-control">
</div>
</td>
<td>
<div class="input-group mb-3">
<input name="hours" type="text" class="hours form-control">
</div>
</td>
<td>
<button type="button" style="background-color: #bf5700;" class="addRow btn btn-warning text-light"><i
class="fas fa-plus-circle"></i>&nbsp;Add</button>
</td>
</tr>
</tbody>
</table>