动态生成元素点击事件绑定：jQuery的$(document).on写法对应的原生JavaScript实现方案

阿华AIGC实验室

2026-4-28

原生JS实现动态元素的点击事件委托（替代jQuery的.on()）

嘿，这个问题我太熟悉了！你遇到的是动态生成元素绑定事件的典型场景——jQuery里的$(document).on('click', '#popup-pers .mfp-close', ...)本质是事件委托，靠事件冒泡机制来监听后续生成的元素。咱们用原生JS完全可以实现同样的效果，核心思路也是利用事件冒泡，把事件绑定到已经存在的父元素上，再判断触发事件的目标是不是我们要的元素。

为什么直接用`querySelector`不行？

当你页面加载时，.mfp-close还没被动态生成出来，这时候document.querySelector('#popup-pers .mfp-close')会返回null，自然没法绑定点击事件。这就需要把“监听”的位置往上移，放到一个页面加载时就存在的父元素上（比如#popup-pers，甚至document）。

原生JS的两种实现方案

方案1：绑定到最近的稳定父元素（推荐）

如果#popup-pers是页面加载时就存在的（只是里面的.mfp-close是动态生成的），直接把事件绑定到它上面，性能更好：

// 先获取稳定的父元素
const popupPers = document.querySelector('#popup-pers');
if (popupPers) {
  popupPers.addEventListener('click', function(e) {
    // 检查点击的元素是不是.mfp-close，或者是它的子元素（比如按钮里的图标）
    const closeBtn = e.target.closest('.mfp-close');
    if (closeBtn) {
      e.preventDefault(); // 阻止默认行为（比如按钮是a标签的话）
      // 这里写你要执行的逻辑，比如关闭弹窗
      console.log('动态生成的关闭按钮被点击啦！');
    }
  });
}

方案2：绑定到document（适合父元素也动态生成的情况）

如果连#popup-pers都是动态生成的，那就把事件绑定到最上层的document：

document.addEventListener('click', function(e) {
  // 直接查找匹配#popup-pers .mfp-close的元素
  const closeBtn = e.target.closest('#popup-pers .mfp-close');
  if (closeBtn) {
    e.preventDefault();
    // 执行你的业务逻辑
    console.log('关闭按钮触发！');
  }
});