JS动态创建flip-card翻转卡片后点击触发翻转功能失效问题求助

• 事件绑定时机错误：动态插入DOM的操作是异步渲染的，你在DOM还没完成挂载到文档流时就执行querySelectorAll获取卡片节点，虽然能拿到节点对象，但事件绑定不会生效
• 嵌套循环导致重复绑定冲突：将innerFlipCards.forEach嵌套在projects.forEach中，每生成1个项目就给所有已生成的卡片重复绑定1次点击事件，多次切换翻转状态最终抵消，就会出现仅奇数卡片生效、点击单张触发所有卡片回调的问题

方案1：单节点创建时直接绑定事件（无DOM查询依赖） #

生成单个卡片DOM节点的同时直接绑定监听，不需要后续批量查询DOM，完全规避作用域和绑定时机问题：

// 生成单个卡片的逻辑中直接绑定
function buildProjectCard(projectItem) {
  const flipCardInner = document.createElement('div')
  flipCardInner.classList.add('flip-card-inner')
  // 直接给当前创建的卡片加点击事件
  flipCardInner.addEventListener('click', () => {
    // 仅小屏下触发翻转
    if (window.innerWidth < 768) {
      flipCardInner.classList.toggle('flipped')
    }
  })
  // 剩余生成卡片正面、反面内容，插入父容器的逻辑
}

方案2：事件委托（无需关心DOM生成时机） #

给所有卡片的挂载父容器绑定事件，通过事件冒泡匹配点击目标，动态生成的节点自动生效，全局只需绑定1次：

// 页面初始化时执行一次即可
document.querySelector('.卡片父容器的类名或ID').addEventListener('click', (e) => {
  // 大屏跳过点击逻辑
  if (window.innerWidth >= 768) return
  // 匹配点击范围内的翻转卡片内层节点
  const targetCard = e.target.closest('.flip-card-inner')
  if (targetCard) {
    targetCard.classList.toggle('flipped')
  }
})

• 确认CSS中flipped类的优先级高于hover状态下的翻转样式，避免样式覆盖导致翻转效果不显示
• 不要将事件绑定逻辑放在延迟显示卡片的setTimeout回调中，上述两种方案均不需要等卡片显示动画执行完成

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