动态生成DOM后无法绑定addCarrinho按钮点击事件求助

问题根源 #

1. 事件绑定时机错误：你在页面加载初期就调用document.querySelectorAll获取按钮，但此时fetch请求还未完成，动态元素根本没渲染到DOM中，自然选不到任何元素。
2. 重复ID违规：循环生成按钮时给每个按钮都加了id="addCarrinho"，ID在HTML文档中必须唯一，这会导致选择器行为异常，甚至影响后续DOM操作。
3. HTML结构错误：代码中<a>标签的闭合顺序混乱，<p>内的<a>未正确闭合，可能导致DOM解析异常，间接影响元素选择。

修复步骤 #

1. 修正HTML结构与重复ID #

先把循环里的重复ID去掉，同时修复标签闭合问题：

const elementoParaInserirJogosNaLista = document.getElementById("listaJogos");

function exibirJogosNaTela(listaDeJogos) {
  elementoParaInserirJogosNaLista.innerHTML = "";
  listaDeJogos.forEach((jogo) => {
    elementoParaInserirJogosNaLista.innerHTML += `
        <div class="jogo">
          <a href="paginajogo.html">
            <img class="jogo__imagem" src="${jogo.imagem}" alt="${jogo.titulo}" />
          </a>
          <h2 class="jogo__titulo">${jogo.titulo}</h2>
          <p class="jogo__preco">R$${jogo.preco}
            <a href="#">
              <img class="jogo__carrinho" src="./images/addcart.png" alt="Adicionar ao carrinho"/>
            </a>
          </p>
        </div>
        `;
  });
}

2. 正确绑定事件的两种方案 #

方案一：渲染完成后立即绑定事件

修改fetch请求的回调逻辑，在动态元素渲染完成后再获取并绑定事件：

let jogos = [];
const endpointDaAPI = "jogos.json";

getBuscarJogosDaAPI();

async function getBuscarJogosDaAPI() {
  // 修正拼写错误：respost → response
  const response = await fetch(endpointDaAPI);
  jogos = await response.json();
  exibirJogosNaTela(jogos.jogos);
  
  // 元素渲染完成后再绑定事件
  const botoesAddCarrinho = document.querySelectorAll(".jogo__carrinho");
  botoesAddCarrinho.forEach(botao => {
    botao.addEventListener("click", addNoCarrinho);
  });
}

function addNoCarrinho () {
  console.log('ok')
}

方案二：事件委托（更推荐）

无需每次渲染后重复绑定事件，直接给父元素绑定事件，利用事件冒泡处理动态元素的点击：

const elementoParaInserirJogosNaLista = document.getElementById("listaJogos");

// 页面加载时就给父元素绑定事件，兼容后续动态生成的元素
elementoParaInserirJogosNaLista.addEventListener("click", function(e) {
  // 判断点击的目标是否是购物车按钮
  if (e.target.classList.contains("jogo__carrinho")) {
    addNoCarrinho();
    // 可选：获取当前游戏的信息（比如标题）
    const jogoCard = e.target.closest(".jogo");
    const jogoTitulo = jogoCard.querySelector(".jogo__titulo").textContent;
    console.log(`添加 ${jogoTitulo} 到购物车`);
  }
});

function addNoCarrinho () {
  console.log('ok')
}

这种方式更高效，尤其适合频繁动态更新DOM的场景，避免重复绑定事件的冗余操作。

3. 其他小修正 #

• 删除原代码中无效的按钮初始化逻辑：const botoesAddCarrinho = []; botoesAddCarrinho = document.querySelectorAll(".jogo__carrinho");，这段代码执行时机过早，完全起不到作用。
• 修正fetch请求中的拼写错误：respost改为response，避免JSON解析失败。

内容的提问来源于stack exchange，提问作者Vinicius V. Rodrigues