WordPress中切换表单后动态绑定EventListener失效问题求解

问题根源 #

• 不必要的异步处理：updatePopLink函数使用了async/await，但addEventListener是同步API，这会导致事件绑定被错误延迟，首次切换时无法及时生效。
• 全局变量逻辑混乱：函数内错误依赖全局popLink变量判断是否移除事件，而非基于传入的新元素，导致首次切换时事件绑定逻辑出错。

修正方案 #

• 移除updatePopLink的async/await修饰，恢复同步执行
• 调整事件解绑/绑定逻辑，明确区分旧元素与新元素
• 确保切换表单时，先获取最新DOM元素再执行事件更新

修正后的代码 #

window.onload = function () {
  const oneTime = document.getElementById("show_iframe_2");
  const monthly = document.getElementById("show_iframe_1");
  // 初始绑定月度表单元素
  let popLink = document.getElementById("privacyLink");
  let consentCheckBox = document.getElementById("field_68823bb");
  updatePopLink(popLink, consentCheckBox);

  function updatePopLink(newLink, newCheckBox) {
    // 先移除旧元素的事件监听
    if (popLink) {
      popLink.removeEventListener("click", launchPopUp);
    }
    // 更新全局变量为新元素
    popLink = newLink;
    consentCheckBox = newCheckBox;
    // 为新元素绑定事件
    if (popLink) {
      popLink.addEventListener("click", launchPopUp);
    }
  }

  function launchPopUp(e) {
    e.preventDefault(); // 阻止链接默认跳转行为
    fetch("https://privacy-and-tos-page/")
      .then((response) => response.text())
      .then((text) => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(text, "text/html");
        const element = doc.getElementById("main");
        const html = element.innerHTML;

        Swal.fire({
          title: "",
          html: html,
          showCancelButton: true,
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          confirmButtonColor: "#3085d6",
          width: 1200,
        }).then((result) => {
          if (result.isConfirmed) { // 适配SweetAlert2新版本判断逻辑
            consentCheckBox.checked = true;
          } else if (result.dismiss === Swal.DismissReason.cancel) {
            consentCheckBox.checked = false;
          }
        });
      });
  }

  oneTime.addEventListener("click", function (event) {
    // 切换到一次性表单时，获取对应元素
    const newPopLink = document.getElementById("privacyLink");
    const newCheckBox = document.getElementById("field_6a9f758");
    updatePopLink(newPopLink, newCheckBox);
  });

  monthly.addEventListener("click", function (event) {
    // 切换到月度表单时，获取对应元素
    const newPopLink = document.getElementById("linkId");
    const newCheckBox = document.getElementById("field_68823bb");
    updatePopLink(newPopLink, newCheckBox);
  });
};

额外优化点 #

• 添加e.preventDefault()阻止链接默认跳转，避免弹窗触发时页面跳转
• 适配SweetAlert2新版本的result.isConfirmed判断（原result.value在新版本已弃用）
• 增加元素存在性判断，防止DOM元素未加载时出现报错

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