动态新增行select无法触发getProduk获取harga_produk问题求助

你的问题核心是动态新增元素未绑定事件，加上重复使用id导致DOM选择冲突，具体修复步骤如下：

1. 修正HTML结构（初始行+新增行模板） #

把重复的id改为类名，保证DOM元素标识唯一：

<!-- 初始行示例 -->
<div class="form-row">
  <div class="col">
    <select class="form-control produk-select" name="produk[]">
      <!-- 产品选项内容 -->
    </select>
  </div>
  <div class="col">
    <input type="text" class="form-control harga-input" name="harga[]" readonly>
  </div>
  <div class="col">
    <button type="button" class="btn btn-danger btndelform">删除</button>
  </div>
</div>

<!-- 新增行的HTML模板（JS中生成时用） -->
const newRowTemplate = `
<div class="form-row">
  <div class="col">
    <select class="form-control produk-select" name="produk[]">
      <!-- 产品选项内容，和初始行一致 -->
    </select>
  </div>
  <div class="col">
    <input type="text" class="form-control harga-input" name="harga[]" readonly>
  </div>
  <div class="col">
    <button type="button" class="btn btn-danger btndelform">删除</button>
  </div>
</div>
`;

2. 修改JavaScript事件绑定逻辑 #

使用事件委托绑定下拉框切换事件，确保动态新增的元素也能触发，同时精准定位当前行的价格输入框：

// 替换原来的$('#produk').change(...)，改用事件委托
$(document).on('change', '.produk-select', async function() {
  const produkId = $(this).val();
  // 找到当前下拉框所在行的价格输入框
  const $targetHarga = $(this).closest('.form-row').find('.harga-input');

  if (!produkId) {
    $targetHarga.val('');
    return;
  }

  try {
    const produkData = await getProduk(produkId);
    $targetHarga.val(produkData.harga_produk);
  } catch (err) {
    console.error('获取产品价格失败:', err);
    $targetHarga.val('');
  }
});

// 你的getProduk函数保持不变（示例）
async function getProduk(id) {
  const res = await fetch(`/produk/${id}`); // 对应Laravel Resource Controller的show路由
  if (!res.ok) throw new Error('请求失败');
  return res.json();
}

// 新增行按钮逻辑（确保正确插入模板）
$('.btnaddfrom').click(function() {
  $('.form-container').append(newRowTemplate); // 假设容器类为form-container
});

关键说明 #

• 事件委托：通过绑定到document，让所有.produk-select元素（包括动态新增的）触发切换事件，解决静态绑定无法覆盖动态元素的问题。
• DOM精准定位：用closest('.form-row')锁定当前行，再通过find('.harga-input')找到对应输入框，避免重复id导致的选择错误。
• 唯一标识：HTML中id必须唯一，改用类名避免冲突。

内容的提问来源于stack exchange，提问作者0008_juan pratama wt