HTML表格动态添加行时jQuery自动填充失效问题求助

问题根源 #

初始页面加载时，你给第一行的输入框绑定了自动填充的事件监听，但动态新增的行是后续通过JS创建的，这些新元素没有被绑定对应的事件，所以无法触发自动填充逻辑。

解决方案：使用事件委托 #

把事件监听绑定到静态的父容器上，而不是直接绑定到输入框本身，这样后续动态添加的子元素触发事件时，会通过事件冒泡被父容器捕获，从而执行对应的逻辑。

示例代码实现

假设你的表单结构大概是这样（父容器用#form-container）：

<div id="form-container">
  <!-- 初始行 -->
  <div class="form-row">
    <input type="text" class="product-input" placeholder="输入产品编号">
    <input type="text" class="product-name" readonly>
    <input type="text" class="product-price" readonly>
  </div>
</div>
<button id="add-row-btn">添加新行</button>

1. 动态添加行的JS代码（保持原有逻辑，确保新行的类名和初始行一致）

document.getElementById('add-row-btn').addEventListener('click', function() {
  const container = document.getElementById('form-container');
  const newRow = document.createElement('div');
  newRow.className = 'form-row';
  newRow.innerHTML = `
    <input type="text" class="product-input" placeholder="输入产品编号">
    <input type="text" class="product-name" readonly>
    <input type="text" class="product-price" readonly>
  `;
  container.appendChild(newRow);
});

2. 修改自动填充的事件监听为事件委托

// 绑定到静态父容器
document.getElementById('form-container').addEventListener('input', function(e) {
  // 判断触发事件的元素是否是产品编号输入框
  if (e.target.classList.contains('product-input')) {
    const productId = e.target.value.trim();
    const row = e.target.closest('.form-row'); // 获取当前输入框所在的行
    if (!productId) {
      // 清空当前行的自动填充内容
      row.querySelector('.product-name').value = '';
      row.querySelector('.product-price').value = '';
      return;
    }

    // 发送AJAX请求到PHP接口获取产品数据
    fetch('get_product.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: `product_id=${encodeURIComponent(productId)}`
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        // 填充当前行的对应字段
        row.querySelector('.product-name').value = data.name;
        row.querySelector('.product-price').value = data.price;
      } else {
        // 没有找到数据时清空
        row.querySelector('.product-name').value = '';
        row.querySelector('.product-price').value = '';
        alert('未找到对应产品');
      }
    })
    .catch(error => {
      console.error('请求错误:', error);
      alert('获取产品数据失败');
    });
  }
});

3. 对应的PHP接口（get_product.php）示例

<?php
// 连接MySQL数据库
$conn = mysqli_connect('localhost', 'username', 'password', 'database_name');
if (!$conn) {
  die(json_encode(['success' => false, 'msg' => '数据库连接失败']));
}

$productId = $_POST['product_id'] ?? '';
if (empty($productId)) {
  echo json_encode(['success' => false, 'msg' => '产品编号不能为空']);
  exit;
}

// 查询产品数据（注意防止SQL注入）
$stmt = mysqli_prepare($conn, "SELECT name, price FROM products WHERE id = ?");
mysqli_stmt_bind_param($stmt, 's', $productId);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);

if ($product = mysqli_fetch_assoc($result)) {
  echo json_encode([
    'success' => true,
    'name' => $product['name'],
    'price' => $product['price']
  ]);
} else {
  echo json_encode(['success' => false, 'msg' => '未找到产品']);
}

mysqli_stmt_close($stmt);
mysqli_close($conn);
?>

关键注意点 #

• 确保动态生成的行和初始行使用相同的类名，这样事件委托能准确识别目标元素。
• 使用closest('.form-row')获取当前输入框所在的行，确保填充数据时不会影响其他行。
• 务必做好SQL注入防护，使用预处理语句（如上面的mysqli_prepare）。
• 如果使用jQuery，事件委托可以写成$('#form-container').on('input', '.product-input', function() { ... })，原理一致。

内容的提问来源于stack exchange，提问作者Mian Omer