我来帮你搞定这个问题！你遇到的两种方案失效或异常，核心原因是谷歌翻译的DOM元素是动态生成的，且DOM变化监听的粒度太粗。下面给你两种可靠的解决方案：

方案1：事件委托+防重复触发 #

你的第一个方案失效是因为.goog-te-menu2-item是谷歌翻译动态生成的，直接绑定点击事件时元素还不存在。用事件委托绑定到父级（比如document）就能解决，再配合标志位防止重复刷新：

let isReloading = false;

// 绑定到document上，监听所有点击事件
document.addEventListener('click', function(e) {
  // 检查点击的元素是否是目标菜单项
  const targetItem = e.target.closest('.goog-te-menu2-item');
  if (targetItem && !isReloading) {
    isReloading = true;
    // 加500ms延迟，确保谷歌翻译完成语言状态记录再刷新
    setTimeout(() => {
      location.reload();
    }, 500);
  }
});

说明：

• closest()方法会从当前元素向上查找匹配的父元素，能准确识别点击的是语言菜单项
• isReloading标志位避免用户快速多次点击导致多次刷新
• 小延迟是为了让谷歌翻译有足够时间把语言设置写入cookie，避免刷新后语言没切换成功

方案2：监听谷歌翻译的Cookie变化（更精准） #

谷歌翻译会把当前选中的语言存储在名为googtrans的Cookie里，监听这个Cookie的变化来触发刷新，是最精准的方式：

// 封装一个监听指定Cookie变化的函数
function listenForCookieChange(cookieName, callback) {
  // 获取初始Cookie值
  let lastCookieValue = document.cookie
    .split('; ')
    .find(row => row.startsWith(`${cookieName}=`))
    ?.split('=')[1];

  // 定时检查Cookie变化
  setInterval(() => {
    const currentCookieValue = document.cookie
      .split('; ')
      .find(row => row.startsWith(`${cookieName}=`))
      ?.split('=')[1];
    
    // 如果Cookie值变化且不为空，触发回调
    if (currentCookieValue !== lastCookieValue && currentCookieValue) {
      lastCookieValue = currentCookieValue;
      callback();
    }
  }, 300); // 每300ms检查一次，可根据需求调整
}

// 监听谷歌翻译的Cookie变化，触发页面刷新
listenForCookieChange('googtrans', function() {
  location.reload();
});

说明：

• 这种方式完全基于语言设置的实际变化触发刷新，不会受DOM无关修改的影响
• 检查间隔可以根据实际情况调整，300ms是比较平衡的数值，既不会太耗性能也不会错过变化

为什么你的原有方案不行？ #

1. 方案1失效：.goog-te-menu2-item是谷歌翻译加载后动态生成的DOM元素，你绑定事件的时候这些元素还不存在，所以普通的on('click')无法生效，必须用事件委托。
2. 方案2多次刷新：DOMSubtreeModified事件会在元素的任何子节点（包括文本、属性）变化时触发，谷歌翻译切换语言过程中会多次修改DOM结构，导致该事件被触发多次，从而多次刷新页面。

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