Question

我将tippy.js与html模板一起使用。我的代码为：

self._tippy = Tippy('.test', {
html: '#test_id',
....
....
onShow(){...}
...
})

在html模板中，我选择带onclick事件的标签为：

<select id="language-list" onchange="changeLanguage()"></select>

我动态地为选择添加选项。一切似乎都没问题，但我无法在任何地方找到changeLanguage事件，我不知道在哪里编写changeLanguage（）{...}函数来捕获事件。我在tippy js onShow（）或其他地方添加changeLanguage（）{...}但无法触及事件触发器。我只收到错误消息：

未捕获的ReferenceError：未定义changeLanguage 在HTMLSelectElement.onchange

另一方面，我尝试使用

进行事件处理

document.getElementById('language-list').addEventListener('change'){...}

但没有成功。有人告诉我该做什么以及我错过了什么。

我在jsfidd https://jsfiddle.net/s6zcn7tx/46/测试它但结果相同。

Answer 1

我在codepen.io/imnofox/pen/NvWjzK的样本中找到了解决方案。

使用＆＃34;更改＆＃34; select_istener用于tippy js范围之外的select事件：

document.querySelector("body").addEventListener("change", function(event) {
  let select = event.target;

if (select.tagName.toLowerCase() === "select" && select.id === "language-list"
) {
var value = select.value; // you got the value  
// do something else
})

如果你想更改当前的tippy.js tolltip html，那么你可以使用event.target来访问工具提示html。我用的是考试：

let selectedAuthorsHtml = select.closest(".tippy-tooltip-content").childNodes[7].childNodes[3]; // to get selected authors html

然后使用新值更新html以反映tippy.js工具提示。

如何捕捉tippy js模板事件

1 个答案: