如何动态更新HTML页面的bricks变量并绑定新元素事件？

原代码中document.querySelectorAll(".brick")返回的是静态NodeList，它不会自动追踪页面后续新增的元素，所以动态添加的.brick既不会被加入bricks集合，也没有绑定点击事件。下面提供两种可行的解决方式：

方式一：事件委托（推荐，更高效） #

不用手动维护bricks数组，利用事件冒泡特性，把点击事件绑定到所有.brick的共同父容器（比如document，或更具体的父元素），统一处理所有.brick的点击，包括动态新增的：

// 绑定到父容器，这里用document作为示例，建议换成实际的共同父元素
document.addEventListener('click', function(e) {
  // 判断触发事件的元素是否是.brick
  if (e.target.classList.contains('brick')) {
    const bricktype = e.target.getAttribute('type');
    console.log(bricktype);
  }
});

方式二：手动更新bricks数组并绑定事件 #

如果必须维护bricks数组，可将初始获取的NodeList转为数组，每次新增元素后手动添加到数组并绑定事件：

// 初始获取元素并转为数组
let bricks = Array.from(document.querySelectorAll(".brick"));

// 封装绑定点击事件的复用函数
function bindBrickClick(brick) {
  brick.addEventListener("click", function () {
    const bricktype = this.getAttribute("type");
    console.log(bricktype);
  });
}

// 给初始元素绑定事件
bricks.forEach(bindBrickClick);

// 假设这是你动态添加.brick的函数（根据实际场景调整）
function addNewBrick(brickType) {
  const newBrick = document.createElement('div');
  newBrick.className = 'brick';
  newBrick.setAttribute('type', brickType);
  newBrick.textContent = `类型：${brickType}`;
  // 把新元素添加到页面（示例添加到body，实际换成你的目标容器）
  document.body.appendChild(newBrick);
  
  // 更新bricks数组并绑定事件
  bricks.push(newBrick);
  bindBrickClick(newBrick);
}

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