动态生成表中的另一行后，JQuery函数不起作用[重复]
Posted
技术标签:
【中文标题】动态生成表中的另一行后，JQuery函数不起作用[重复]【英文标题】：JQuery function not working after another row in my table is dynamically generated [duplicate] 【发布时间】：2021-08-16 01:54:56 【问题描述】：我有一个输入表单，当单击添加按钮时，它会提交当前的数据行，然后添加新的一行输入字段以输入更多数据。当我单击添加按钮时，它会将第一个输入数据发布到数据库中并创建一个新行。但是，当我尝试提交第二行时，没有任何反应。数据没有提交，也没有添加另一行。
这是我的 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> Add</button>
</td>
</tr>
</tbody>
</table>
我希望按钮保留在 中，以便用户知道他们必须单击添加按钮才能添加该数据。但这目前仅适用于第一个数据输入。添加第二行时，按钮不起作用，我无法提交数据并且未创建另一行。非常感谢任何建议！
【问题讨论】：
【参考方案1】：$('#addRow') 在 JS 代码执行时被评估一次。
当您克隆并添加新行时，您实际上是使用id="addRow" 创建了一个新的（和不同的！）元素。那个元素没有监听点击事件的处理程序。
相反，您需要使用 jquery $.on() 将侦听器置于不变的内容上，例如 #tableData：
$('#tableData').on('click', '.addRow', function(e)
...
);
这样，元素listening 是#tableData，它会获得点击，然后检查点击是否源自与.addRow 匹配的内容。您的实际功能无需更改。
但是，您需要将添加按钮从 id="addRow" 更改为 class="addRow"（或使用名称属性或其他任何东西），这样您就不会在 DOM 中拥有多个具有相同 ID 的元素。
【讨论】：
【参考方案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> Add</button>
</td>
</tr>
</tbody>
</table>【讨论】：
以上是关于动态生成表中的另一行后，JQuery函数不起作用[重复]的主要内容，如果未能解决你的问题，请参考以下文章
完整功能中的ajax调用后刷新jquery mobile listview不起作用