WordPress Give插件文件上传JS change事件仅首次生效求助

我最近在给WordPress的Give筹款插件集成文件上传功能时，碰到了一个挺头疼的问题——我写的文件大小和类型校验JS代码，只在页面第一次加载时管用，切换支付方式后就彻底失效了。

具体场景 #

• 页面刚加载完成后，上传大于500KB或者非.jpg/.pdf格式的文件，文件上传区域下方会正常弹出错误提示
• 但切换到「银行转账捐赠」选项后，表单会自动更新：文件上传区域前新增了提示文本，同时表单字段被清空。这时候再上传不符合要求的文件，错误提示完全不出现，我加的alert("QUI")都没触发，明显JS的change事件没绑定到新的元素上

我最初写的代码 #

文件上传区域的HTML：

<div class="file-uploader"> 
  <input id="fileToUpload" name="fileToUpload" type="file" accept=".pdf,.jpg"/> 
  <label for="file-upload" class="custom-file-upload"> 
    <i class="fas fa-cloud-upload-alt"></i>Clicca per scegliere il file 
    <span name="filenamecheck" id="filenamecheck">test</span> 
  </label> 
  <p id="error" style="color: #c00000"></p> 
</div>

校验用的JavaScript：

<script> 
var inputElement = document.getElementById("fileToUpload") 
inputElement.addEventListener('change', function(){ 
  alert("QUI"); 
  var error = 0; 
  var fileLimit = 500; // In kb 
  var files = inputElement.files; 
  var fileSize = files[0].size; 
  var fileSizeInKB = (fileSize/1024); // Convert bytes to kilobytes 
  var fileName = inputElement.value; 
  idxDot = fileName.lastIndexOf(".") + 1; 
  extFile = fileName.substr(idxDot, fileName.length).toLowerCase(); 
  
  // Reset error messages and filename display
  document.getElementById("error").innerHTML = ""; 
  document.getElementById("filenamecheck").innerHTML = inputElement.value; 

  // Validate file type
  if (extFile !== "jpg" && extFile !== "pdf"){ 
    error = 1; 
    document.getElementById("error").innerHTML = "Solo file .pdf o .jpg"; 
    document.getElementById("fileToUpload").value = ""; 
  } 

  // Validate file size if type is okay
  if (error === 0) { 
    if(fileSizeInKB >= fileLimit) { 
      document.getElementById("error").innerHTML = "Massima grandezza file: " + fileLimit + "KB"; 
      document.getElementById("fileToUpload").value = ""; 
    } 
  } 
}) 
</script>

解决方案 #

折腾了半天终于找到问题所在！原来我一开始把这段JS代码放在了表单标签的外面，当切换支付方式导致表单刷新时，这段代码不会被重新执行，新生成的#fileToUpload元素自然没有绑定change事件。

解决方法是改用WordPress的钩子（在主题的functions.php文件中配置），把JS代码插入到表单内的<input>标签之后。这样每次表单刷新时，JS代码都会被重新加载，事件也能正确绑定到新的文件上传元素上，问题彻底解决了。

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