递归函数内querySelectorAll无法获取新增.popup节点的问题

1. 你的递归检测逻辑在第一次发现.popup元素后就直接resolve()终止了检测，后续用户上传新文件生成的新.popup不会被再次捕获，所以每次只能拿到第一个。
2. 关于getElementsByClassName()的长度问题：它返回的是实时HTMLCollection，控制台显示的是集合的当前状态（你展开时的状态），但console.log(modals.length)执行的瞬间，新增元素还没插入DOM，所以打印的是当时的长度1，后续新增元素是之后才加入集合的。

推荐用MutationObserver监听DOM变化，这是处理动态生成元素的标准方案，比递归定时器高效且可靠：

const attachRemoveBgEvent = () => {
  const inputs = document.getElementsByTagName("input");
  for (let i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener("input", initPopupObserver);
  }
};

// 初始化DOM观察者，监听.popup元素的新增
function initPopupObserver() {
  // 选择要监听的根节点（如果知道.popup的父容器，用父容器会更高效）
  const targetNode = document.body;
  const config = {
    childList: true,
    subtree: true, // 监听所有子节点
  };

  const observer = new MutationObserver((mutationsList) => {
    // 遍历所有DOM变化
    for (let mutation of mutationsList) {
      if (mutation.type === 'childList') {
        // 检查新增的节点中是否有.popup
        const newPopups = Array.from(mutation.addedNodes).filter(node => 
          node.nodeType === Node.ELEMENT_NODE && node.classList.contains('popup')
        );
        if (newPopups.length > 0) {
          createRemoveButton(newPopups);
        }
      }
    }
  });

  observer.observe(targetNode, config);
}

const createRemoveButton = (modals) => {
  console.log('新增的弹窗元素：', modals);
  // 这里可以给每个弹窗添加删除按钮逻辑
};

如果非要沿用递归检测的思路，需要修改逻辑，不提前终止检测，而是持续捕获新增元素：

async function checkCropper(e) {
  let processedCount = 0;
  
  function checkModal() {
    let modals = document.querySelectorAll(".popup");
    // 只处理新增的未处理过的弹窗
    if (modals.length > processedCount) {
      const newModals = Array.from(modals).slice(processedCount);
      createRemoveButton(newModals);
      processedCount = modals.length;
    }
    // 持续检测，可根据业务需求添加终止条件（比如所有弹窗关闭后停止）
    setTimeout(checkModal, 1000);
  }

  checkModal();
}

• MutationObserver会在DOM节点新增/删除/修改时触发回调，能精准捕获动态生成的.popup，不需要定时轮询，性能更好。
• 递归轮询的方式要注意设置合理的终止条件，避免无限定时器消耗资源。

内容的提问来源于stack exchange，提问作者Al Amin Khan