嘿，这个问题我太熟悉了！你遇到的是动态生成元素绑定事件的典型场景——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();