如何在页面加载后重复运行脚本并适配多行元素？

你需要实现的效果是：点击「添加项目」按钮新增行后，所有行的下拉框选择选项时隐藏下拉框、显示描述框；描述框输入内容为空时显示下拉框、隐藏描述框，内容不为空则反之。但现有脚本仅对第一行生效，原因是直接使用了全局选择器（如querySelector、$('.product')），只会匹配第一个元素，且无法监听动态新增元素的事件。

修改后的HTML代码（含Bootstrap结构） #

<div class="container mt-3">
  <button id="addItem" class="btn btn-primary mb-3">添加项目</button>
  <div id="itemContainer">
    <!-- 初始行 -->
    <div class="row mb-2 item-row">
      <div class="col-md-4">
        <select class="form-control PAS">
          <option value="-1">请选择</option>
          <option value="1">Petrol</option>
          <option value="2">Gas</option>
          <option value="3">Diesal</option>
          <option value="4">Coal</option>
          <option value="5">Oil</option>
          <option value="6">Aviation Kerosene</option>
        </select>
      </div>
      <div class="col-md-8">
        <input type="text" class="form-control product" placeholder="输入描述" style="display:none;">
      </div>
    </div>
  </div>
</div>

修改后的JavaScript代码 #

$(document).ready(function() {
  // 动态添加项目行
  $('#addItem').click(function() {
    const newRow = `
      <div class="row mb-2 item-row">
        <div class="col-md-4">
          <select class="form-control PAS">
            <option value="-1">请选择</option>
            <option value="1">Petrol</option>
            <option value="2">Gas</option>
            <option value="3">Diesal</option>
            <option value="4">Coal</option>
            <option value="5">Oil</option>
            <option value="6">Aviation Kerosene</option>
          </select>
        </div>
        <div class="col-md-8">
          <input type="text" class="form-control product" placeholder="输入描述" style="display:none;">
        </div>
      </div>
    `;
    $('#itemContainer').append(newRow);
  });

  // 下拉框选择事件（事件委托，兼容动态新增元素）
  $(document).on('change', '.PAS', function() {
    const $row = $(this).closest('.item-row');
    const $productInput = $row.find('.product');
    if ($(this).val() !== '-1') {
      $(this).hide();
      $productInput.show().focus();
    } else {
      $(this).show();
      $productInput.hide();
    }
  });

  // 描述框输入事件（事件委托）
  $(document).on('keyup', '.product', function() {
    const $row = $(this).closest('.item-row');
    const $select = $row.find('.PAS');
    if ($(this).val().trim().length === 0) {
      $select.show();
      $(this).hide();
    } else {
      $select.hide();
      $(this).show();
    }
  });
});

关键修改点说明 #

1. 事件委托：用$(document).on('事件', '选择器', 函数)绑定事件，确保动态新增的元素也能触发事件，避免只能监听初始DOM元素的问题。
2. 行内元素定位：通过closest('.item-row')找到当前元素所在的行，再用find()定位该行内的下拉框或描述框，确保只操作当前行的元素，不会影响其他行。
3. 逻辑优化：用trim()处理输入空格的情况，避免空输入带空格时的误判，同时简化了条件判断逻辑。
4. 动态行生成：补充了「添加项目」按钮的逻辑，确保新增的行结构与初始行一致，保证联动效果统一。

内容的提问来源于stack exchange，提问作者ammad Khilji