本文解决动态克隆多行输入框后，从模态框选择数据时所有行被统一赋值的问题，核心在于正确绑定事件目标与上下文，确保数据仅回填至触发搜索的当前行。
本文解决动态克隆多行输入框后，从模态框选择数据时所有行被统一赋值的问题，核心在于正确绑定事件目标与上下文，确保数据仅回填至触发搜索的当前行。
在使用 Bootstrap 模态框（如 #insert）配合动态克隆表单行（.add-row）的场景中，一个常见但隐蔽的 Bug 是：首次输入并回车弹出模态框后，点击“Select”按钮可正常填充当前行；但克隆新行并重复操作时，所有已存在行的输入框均被同一组数据覆盖。根本原因在于事件监听逻辑中对触发元素的引用不准确。
? 问题定位：$(this) 的作用域陷阱
原始代码中关键片段如下：
$('.card').on('keyup', '.live_search', function(e) {
var keycode = (e.keyCode ? e.keyCode : e.which);
if (keycode == '13') {
var product = $(this); // ⚠️ 错误：此处 this 指向事件委托的 .live_search 元素，但后续 modal 内部 click 绑定会丢失上下文
$('#insert').modal('show', { backdrop: 'static' }).on('click', '#selected', function(e) {
// ... 数据提取 ...
$(product).closest('tr').find('[name="material_name[]"]').val(material);
// ❌ 所有匹配的 [name="material_name[]"] 都会被设值（因 product 未限定唯一性）
});
}
});⚠️ 致命缺陷：var product = $(this) 在模态框 click #selected 回调中仍有效，但 $(product).closest('tr') 并未真正“锁定”当前行——尤其当多个 .live_search 输入框共存时，$(this) 可能被多次覆盖或指向错误实例；更严重的是，$('#insert').on('click', '#selected', ...) 是全局绑定，每次回车都会叠加新监听器，导致多次执行、跨行污染。
✅ 正确解法：用 event.target + 事件委托 + 单次绑定
应彻底重构模态框数据回填逻辑，遵循三个原则：
-
精准捕获触发源：使用
e.target明确当前被按回车的输入框； -
避免监听器堆积：模态框的
#selected点击事件应在文档级一次性委托绑定，而非每次回车都.on()； -
行级上下文隔离：通过
data-*属性或 DOM 路径，确保只更新当前行。
✅ 修复后的完整脚本（关键修改已高亮）：
$(document).ready(function() {
// ✅ 1. 全局委托：只绑定一次 #selected 点击事件（防重复绑定）
$(document).on('click', '#selected', function(e) {
e.preventDefault();
const $btn = $(this);
const $targetRow = $btn.closest('tr'); // 若模态框内表格无 tr，需改用其他上下文方式（见下方说明）
// 提取数据
const id = $btn.data('material-id');
const material = $btn.data('material-name');
const measure_one = $btn.data('material-measure-one');
const measure_two = $btn.data('material-measure-two');
const unit_measure = $btn.data('material-unit-measure');
const length = $btn.data('material-length');
const width = $btn.data('material-width');
const price = $btn.data('material-price');
// ✅ 2. 精准定位：假设模态框外的当前行可通过 data-row-id 关联（推荐方案）
// 更健壮做法：在触发回车时，给模态框加临时属性标记目标行
const targetRowId = $('#insert').data('target-row-id');
if (targetRowId) {
const $row = $(`tr[data-row-id="${targetRowId}"]`);
$row.find('[name="id[]"]').val(id);
$row.find('[name="material_name[]"]').val(material);
$row.find('[name="measure_one[]"]').val(measure_one);
$row.find('[name="measure_two[]"]').val(measure_two);
$row.find('[name="unit_measure[]"]').val(unit_measure);
$row.find('[name="length[]"]').val(length);
$row.find('[name="width[]"]').val(width);
$row.find('[name="price[]"]').val(price);
}
$('#insert').modal('hide');
});
// ✅ 3. 回车事件：记录当前行 ID 到模态框
$('.card').on('keyup', '.live_search', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
const $input = $(e.target); // ✅ 正确：e.target 是实际触发回车的 input 元素
const $row = $input.closest('tr');
// 为防克隆行无 ID，动态添加唯一 data-row-id
if (!$row.attr('data-row-id')) {
$row.attr('data-row-id', Date.now() + Math.random().toString(36).substr(2, 9));
}
$('#insert').data('target-row-id', $row.attr('data-row-id'));
$('#insert').modal('show', {
backdrop: 'static',
keyboard: false
});
}
});
// ✅ 4. 克隆行时，确保新行有独立 data-row-id（可选，但推荐）
$(".add-row").click(function(e) {
e.preventDefault();
const newRowId = Date.now() + Math.random().toString(36).substr(2, 9);
$("#show-item").prepend(`
<tr data-row-id="${newRowId}">
<input type="hidden" name="id[]">
<td class="col-2">
<div class="input-group input-group-sm">
<a href="#" class="btn btn-danger delete-row">
<i class="fa-solid fa-trash-can"></i>
</a>
<input type="text" class="form-control live_search" name="material_name[]" placeholder="Nombre Material">
</div>
</td>
<!-- 其他列保持不变 -->
<td class="col-1"><div class="input-group input-group-sm"><input type="text" class="form-control" name="measure_one[]"></div></td>
<td class="col-1"><div class="input-group input-group-sm"><input type="text" class="form-control" name="measure_two[]"></div></td>
<td class="col-2"><div class="input-group input-group-sm"><input type="text" class="form-control" name="unit_measure[]"></div></td>
<td class="col-1"><div class="input-group input-group-sm"><input type="text" class="form-control" name="length[]"></div></td>
<td class="col-1"><div class="input-group input-group-sm"><input type="text" class="form-control" name="width[]"></div></td>
<td class="col-1"><div class="input-group input-group-sm"><input type="text" class="form-control" name="price[]"></div></td>
</tr>
`);
});
// 删除行（保持不变）
$('.card').on('click', '.delete-row', function(evt) {
evt.preventDefault();
$(this).closest('tr').remove();
});
});? 注意事项与最佳实践
-
不要在模态框
.on()中重复绑定事件：$('#insert').on('click', '#selected', ...)应改为$(document).on('click', '#selected', ...)，否则每按一次回车就新增一个监听器，造成 N 次执行。 - *优先使用 `data-
属性传递上下文**：比依赖 DOM 层级（如closest('tr')`）更稳定，尤其当模态框内容结构复杂时。 - *HTML 中 `data-
属性名需符合规范**：data-material-measure-one（中划线）对应 JS 中.data('materialMeasureOne')（驼峰），但直接用attr('data-material-measure-one')` 更直观可控。 -
克隆后清空输入框：可在克隆代码末尾添加
$newRow.find('.live_search').val('')，避免残留搜索词干扰。 -
服务端返回数据建议 JSON 化：
livesearch.php返回结构化 JSON 而非 HTML 表格，前端用模板渲染，更易维护且避免 XSS 风险。
通过以上重构，即可实现「每行独立搜索 → 独立弹窗 → 独立回填」的预期行为，彻底解决多行数据相互覆盖的顽疾。
