0

我将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：在 HTMLSelectElement.onchange 中未定义 changeLanguage

另一方面，我尝试使用事件处理

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

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

我在 jsfidd https://jsfiddle.net/s6zcn7tx/46/中对其进行了测试，但结果相同。

4

1 回答 1

0

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

使用“change” eventListener 在tippy js范围之外选择事件：

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 来访问tooltip html。例如我使用：

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

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

于 2018-05-20T12:38:38.317 回答