Как поймать событие шаблона tippy js

Question

Я использую tippy.js с HTML-шаблоном. Мой код как:

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

В HTML-шаблон я выбрал тег с событием onclick как:

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

я добавляю опции к выбору динамически. Все вроде бы нормально, но я не могу добраться до события changeLanguage нигде, я не понимаю, где написать функцию changeLanguage(){...}, чтобы перехватить событие. я добавляю changeLanguage(){...} в tippy js onShow() или в других местах, но не могу достичь триггера события. Я получаю только сообщение об ошибке:

Uncaught ReferenceError: changeLanguage не определено в HTMLSelectElement.onchange

С другой стороны, я пытаюсь использовать обработку событий с

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

но безуспешно Кто-нибудь скажет мне, что делать и чего мне не хватает.

Я проверяю это в jsfidd https://jsfiddle.net/s6zcn7tx/46/ но результат тот же.

Answer 1

Я нахожу решение в образце на http://codepen.io/imnofox/pen/NvWjzK.

Использование "change" eventListener для выбора события из области видимости 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
}) 

если вы хотите изменить текущий titi.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.