你遇到的问题核心在于 Tippy.js对HTML模板的处理机制，以及动态生成元素的事件绑定逻辑，下面拆解原因并给出可行方案：

为什么原来的方法失效？ #

1. onchange="changeLanguage()" 报错的原因
   当你在HTML模板里写onchange属性时，浏览器会在**全局作用域（window对象）**里查找changeLanguage函数。如果你的代码是模块化开发（比如用ES模块、闭包包裹），这个函数并没有挂载到window上，自然会抛出ReferenceError。

2. 直接用addEventListener无效的原因
   Tippy.js默认会克隆你指定的HTML模板内容，生成新的DOM元素插入到tooltip容器中。你直接通过document.getElementById('language-list')绑定事件时，绑定的是原模板里的元素（可能处于隐藏状态或未被Tippy使用），而tooltip实际显示的是克隆后的新元素，事件并没有绑定到这个新元素上。

两种可行的解决方法 #

方法1：利用Tippy的生命周期回调绑定事件 #

Tippy提供了onShow等生命周期钩子，在tooltip显示时，克隆后的元素已经被插入到DOM中，此时可以精准获取到tooltip内的select元素并绑定事件：

// 定义事件处理函数（无需全局暴露）
function handleLanguageChange(e) {
  console.log('选中的语言:', e.target.value);
  // 这里写你的语言切换逻辑
}

// 初始化Tippy
self._tippy = Tippy('.test', {
  html: '#test_id',
  // 在tooltip显示完成后绑定事件
  onShow(instance) {
    // 通过instance.popper获取tooltip的容器，再查找内部的select
    const selectEl = instance.popper.querySelector('#language-list');
    // 先移除旧事件（避免重复绑定），再添加新事件
    selectEl.removeEventListener('change', handleLanguageChange);
    selectEl.addEventListener('change', handleLanguageChange);
  },
  // 可选：在tooltip隐藏时清理事件，避免内存泄漏
  onHide(instance) {
    const selectEl = instance.popper.querySelector('#language-list');
    selectEl.removeEventListener('change', handleLanguageChange);
  }
});

方法2：使用事件委托（更通用） #

事件委托利用事件冒泡机制，给一个已经存在的父元素（比如body或更接近的容器）绑定事件，监听所有子元素的change事件，这样不管tooltip什么时候生成新的select元素，都能触发回调：

// 定义事件处理函数
function handleLanguageChange(e) {
  // 只处理id为language-list的select元素
  if (e.target.id !== 'language-list') return;
  console.log('选中的语言:', e.target.value);
  // 你的语言切换逻辑
}

// 给body绑定事件委托（页面加载完成后执行）
document.addEventListener('DOMContentLoaded', function() {
  document.body.addEventListener('change', handleLanguageChange);
});

额外提示 #

如果一定要用onchange属性的方式（不推荐，会污染全局作用域），可以把函数挂载到window对象上：

window.changeLanguage = function() {
  // 你的逻辑
};

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