切换文档语言后，insertAdjacentHTML插入元素的Event Listener失效问题

我把文档语言从阿拉伯语切换为英语时，设置了dir="ltr"，同时隐藏了父div.date-and-language，并用insertAdjacentHTML把带.language类的元素插到了文档其他位置。但新插入的.language元素上的点击事件完全没用，类名没改，连绑定到document的事件委托也没效果，这是怎么回事？

原代码：

const language = document.querySelector(".language");
const languageOptions = document.querySelector(".language-options");
const mainHeaderOptions = document.querySelector(".main-header-options");
const dateAndLanguage = document.querySelector(".date-and-language");

const changeLanguage = (e) => {
  languageOptions.classList.toggle("hide");
};

language.addEventListener("click", (e) => changeLanguage(e));

const toEnglish = () => {
  document.documentElement.setAttribute("dir", "ltr");
  dateAndLanguage.style.display = "none";

  const html = `
    <div class="language">
      <i class="fa-solid fa-earth-europe icon"></i>
      Language
      <i class="fa-solid fa-angle-down icon"></i>
      <div class="language-options hide">
        <p class="arabic">عربي</p>
        <p class="english">English</p>
      </div>
    </div>
  `;
  mainHeaderOptions.insertAdjacentHTML("beforeend", html);
};

english.addEventListener("click", () => toEnglish());

我尝试改成绑定document的事件委托，但还是不行：

const changeLanguage = (e) => {
  if(e.target.classList.contains("language")){
    languageOptions.classList.toggle("hide"); // 没效果
  }
};

document.addEventListener("click", (e) => changeLanguage(e));

1. 初始事件绑定仅针对旧元素：一开始你给document.querySelector(".language")找到的原始元素绑定了点击事件，但insertAdjacentHTML插入的是全新的DOM节点——新元素和旧元素只是类名相同，完全是两个独立对象，旧的事件监听不会自动转移到新元素上。
2. 事件委托逻辑存在两处错误：
   • 代码里操作的languageOptions还是旧元素对应的.language-options，新插入的.language元素有自己独立的.language-options节点，操作旧节点自然看不到效果；
   • e.target可能是.language内部的图标或文字（子元素），这些元素的class不是language，导致判断条件根本不会触发。

方案一：修复事件委托逻辑 #

通过closest()找到点击元素所属的.language父节点，再操作该节点下的.language-options：

const changeLanguage = (e) => {
  // 找到点击元素所属的.language父节点
  const languageElement = e.target.closest(".language");
  if (languageElement) {
    // 获取当前language元素下的options节点
    const currentOptions = languageElement.querySelector(".language-options");
    currentOptions.classList.toggle("hide");
  }
};

document.addEventListener("click", changeLanguage);

方案二：插入新元素后手动绑定事件 #

如果不想用事件委托，可在插入新元素后，找到它并重新绑定点击事件：

const toEnglish = () => {
  document.documentElement.setAttribute("dir", "ltr");
  dateAndLanguage.style.display = "none";

  const html = `
    <div class="language">
      <i class="fa-solid fa-earth-europe icon"></i>
      Language
      <i class="fa-solid fa-angle-down icon"></i>
      <div class="language-options hide">
        <p class="arabic">عربي</p>
        <p class="english">English</p>
      </div>
    </div>
  `;
  mainHeaderOptions.insertAdjacentHTML("beforeend", html);
  
  // 找到新插入的language元素并绑定事件
  const newLanguage = mainHeaderOptions.querySelector(".language:last-child");
  const newOptions = newLanguage.querySelector(".language-options");
  newLanguage.addEventListener("click", () => {
    newOptions.classList.toggle("hide");
  });
};

方案三：统一用事件委托处理所有语言切换按钮 #

这种方式最省心，不管是初始元素还是后续插入的新元素，都能触发事件：

// 直接给document绑定，处理所有.language的点击
document.addEventListener("click", (e) => {
  const languageElement = e.target.closest(".language");
  if (!languageElement) return;
  
  const options = languageElement.querySelector(".language-options");
  options.classList.toggle("hide");
});

// 语言切换到英文的逻辑不变
const toEnglish = () => {
  document.documentElement.setAttribute("dir", "ltr");
  dateAndLanguage.style.display = "none";

  const html = `
    <div class="language">
      <i class="fa-solid fa-earth-europe icon"></i>
      Language
      <i class="fa-solid fa-angle-down icon"></i>
      <div class="language-options hide">
        <p class="arabic">عربي</p>
        <p class="english">English</p>
      </div>
    </div>
  `;
  mainHeaderOptions.insertAdjacentHTML("beforeend", html);
};

english.addEventListener("click", toEnglish);

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