为何JS动态创建的isActive类按钮点击事件无效？

你当前的点击事件绑定逻辑是在页面初始化时，通过document.querySelectorAll('.isActive')获取所有已存在的.isActive按钮，再逐个绑定点击事件。但动态创建的按钮是在页面初始化之后才添加到DOM中的，这些新按钮根本不在最初的isActive集合里，自然没被绑定上点击处理代码。

利用事件冒泡机制，把点击事件绑定到一个页面初始化时就存在的父容器上，而不是直接绑定到每个按钮。当点击事件冒泡到父容器时，再判断触发事件的元素是否是目标按钮（带.isActive类），如果是就执行处理逻辑。

修改getActiveBtn.js代码如下：

const main = document.querySelector('.main')
const mainHeading = document.createElement('h1')
main.appendChild(mainHeading)

// 选一个稳定的父容器，这里用body，也可以选更贴近按钮的固定容器
const parentContainer = document.body;

const getActiveBtn = (() => {
    parentContainer.addEventListener('click', (e) => {
        // 判断点击的元素是否是目标按钮
        if (e.target.classList.contains('isActive')) {
            mainHeading.textContent = e.target.textContent
        }
    })
})()

如果知道所有按钮都在某个固定父容器里（比如.top-menu-content和.bottom-menu-content的共同父元素），可以把parentContainer换成这个更具体的容器，减少事件冒泡层级，提升性能。

• 动态添加按钮时，不用遍历所有.project-name-btn拿projectTitle，直接从输入值获取就行：

  // 替换原来的遍历代码
  projectTitle = capitalize(projectNameInput.value)
  console.log(projectTitle)
  

• 清空输入框的代码可以简化，不用切换type：

  projectNameInput.value = ''
  // 移除这两行多余代码
  // projectNameInput.type = 'reset'
  // projectNameInput.type = 'text'
  

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