如何实现事件委托解决动态Partial文件上传失效问题

问题根源 #

你当前代码用唯一ID标识按钮、文件输入框等元素，但动态加载多个action-request-partial后，页面会出现重复ID，getElementById只会返回第一个匹配的元素，导致后续加载的partial上传功能失效。另外，虽然你用了事件委托，但内部还是通过全局ID查找元素，这才是核心问题。

第一步：修改HTML模板（替换重复ID为类） #

把partial里所有重复的ID改成类（ID在页面中必须唯一，类可重复使用）：

<div class="uw-actions-tab-display">
    <div class="uw-section" id="assigned_section">      
      <label for="assigned-to-value">Assigned to: </label>
      <p id="assigned-to-value"><%= action.assigned_to_username %></p>
      <label for="supervisor-value">Supervisor: </label>
      <p id="supervisor-value"><%= action.created_by_username %></p>
      <label for="date_created">Created on: </label>
      <p id="date_created"> <%= action.created_on %></p>
      <label for="date_due">Due On: </label>
      <p id="date_due"><%= action.due_date %></p>
      <!-- 替换id为类 -->
      <p class="uw-action-id"><b> Id:</b> <%=action.uw_action_id %></p>
    </div>

    <div class="uw-section" id="request_type_section">
      <label for="Request Type">Request Type: </label>
      <p id="request_additional_docs" class = "request_type_docs"> </a>*Additional Documents <%= action.additional_documents %> </p>
      <p id="request_endorsement_docs" class = "request_type_docs"> *Endorsements <%= action.endorsements %></p>
      <p id="request_home_ownership_docs" class = "request_type_docs"> *Proof of Home Ownership <%= action.proof_of_home_ownership %></p>
      <p id="request_drivers_license_docs" class = "request_type_docs"> *Drivers License <%= action.drivers_license %></p>
      <p id="request_fl_license_check" class = "request_type_docs"> *FL DL CHECK <%= action.fl_dl_check %></p>
      <!-- 替换id为类 -->
      <input type="file" multiple class="request-type-upload-input"></input> 
      <!-- 替换id为类 -->
      <button type="button" class="request-type-upload-btn">Submit</button>
    </div>

    <div class="uw-section" id="uploaded_section">
      <label>Uploaded: </label>
      <p id="uploaded_additional_docs" class = "uploaded_docs" >*Additional Documents <%= action.additional_documents %> </p>
      <p id="uploaded_endorsement_docs" class = "uploaded_docs" >*Endorsements <%= action.endorsements %></p>
      <p id="uploaded_home_ownership_docs"  class = "uploaded_docs" >*Proof of Home Ownership <%= action.proof_of_home_ownership %></p>
      <p id="uploaded_drivers_license_docs"  class = "uploaded_docs">*Drivers License <%= action.drivers_license %> </p>
      <p id="uploaded_fl_license_check"  class = "uploaded_docs">*FL DL CHECK <%= action.fl_dl_check %></p>
    </div>

    <div class="uw-section" id="status_section">
      <label>Satus: </label>
      <p id="completed_status">*Completed</p>
      <p id="in_progress_status">*In Progress</p>
      <p id="t_docs_status">*T-Docs <br> Received</p>
      <p id="requested_status">*T-Docs <br> Requested</p>
    </div>
  </div>

第二步：修改JavaScript代码（基于上下文的事件委托） #

通过事件委托监听点击，并且在当前partial容器内查找元素，确保每个partial的上传操作独立：

document.addEventListener('click', event => {
  // 判断点击的是否是上传按钮
  if (event.target.matches('.request-type-upload-btn')) {
      // 找到当前按钮所在的partial容器
      const partialContainer = event.target.closest('.uw-actions-tab-display');
      // 在容器内找对应的文件输入框和ID元素
      const requestTypeUploadedDocs = partialContainer.querySelector('.request-type-upload-input').files;
      const uwActionID = partialContainer.querySelector('.uw-action-id').innerText;
      const formData = new FormData();

      Array.from(requestTypeUploadedDocs).forEach(document => {
          if (document.name.includes("additional documents")) {
              formData.append('additional_documents', document);
              console.log('additional documents received');
          } else if (document.name.includes("proof of ownership")) {
              formData.append('proof_of_ownership', document);
              console.log('proof of ownership received');
          } else if (document.name.includes("endorsements")) {
              formData.append('endorsements', document);
              console.log('endorsements received');
          } else if (document.name.includes("drivers license")) {
              formData.append('drivers_license', document);
              console.log('drivers license received');
          }
          console.log(uwActionID);
      });

      fetch('/upload_documents', { 
          method: 'POST',
          body: formData
      })
      .then(response => {
          console.log('Server Responded !');
          console.log(response);
      })
      .catch(error => {
          console.error(error);
      });
  }
});

关键说明 #

1. closest('.uw-actions-tab-display')：定位当前按钮所在的最外层partial容器，确保后续元素查找范围仅局限在当前partial内，不会干扰其他实例。
2. querySelector替代getElementById：在容器内通过类选择器定位元素，避开全局重复ID的冲突问题。
3. 事件委托核心：把事件绑定到静态的document上，动态加载的元素触发事件时会冒泡到document，从而被监听到。

内容的提问来源于stack exchange，提问作者Tyler Ewing