Как поймать событие шаблона tippy js - PullRequest
Новая
       7

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

0 голосов
/ 17 мая 2018

Я использую 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/, но результат тот же.

1 Ответ

0 голосов
/ 20 мая 2018

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

Использование EventListener "change" для события select из области видимости 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, чтобы добраться до всплывающей подсказки html. Например, я использую: 

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

, а затем обновите html новыми значениями, чтобы отразить подсказку tippy.js.

...