如何让所有新创建的Box具备点击生成新圆角Box的能力？

问题核心：你只给页面初始加载时存在的第一个.box绑定了点击事件，后续动态创建的.box没有被绑定事件，所以点击不会生效。下面提供两种可行的解决方案：

方案一：事件委托（推荐，适合大量创建元素的场景） #

利用事件冒泡机制，把点击事件绑定到一个稳定的父元素（比如body），通过判断点击的目标是否为.box元素来执行创建逻辑。这种方式不需要给每个新元素单独绑定事件，更节省内存。

修改后的JavaScript代码：

// 把事件绑定到body，监听所有.box的点击
document.body.addEventListener('click', (e) => {
  // 检查点击的目标是否是.box元素
  if (e.target.classList.contains('box')) {
    const newBox = document.createElement('div');
    newBox.classList.add('box');
    document.body.appendChild(newBox);
  }
});

方案二：创建元素时直接绑定事件 #

把创建.box和绑定事件的逻辑封装成函数，每次创建新元素时，同时给它绑定点击事件。这种方式逻辑更直观，适合元素数量不多的场景。

修改后的JavaScript代码：

// 封装创建box并绑定事件的函数
function createNewBox() {
  const newBox = document.createElement('div');
  newBox.classList.add('box');
  // 给新创建的box绑定点击事件
  newBox.addEventListener('click', createNewBox);
  document.body.appendChild(newBox);
}

// 给初始的box绑定事件
document.querySelector('.box').addEventListener('click', createNewBox);

两种方案都能实现“点击任意.box都生成新的圆角Box”的需求，你可以根据实际场景选择。

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