Я хочу сделать меню на внешнем сайте, в котором я смогу нажимать кнопки. Проблема в том, что кнопки я в нем нажимать не могу. Делал при помощи tippy.js и tampermonkey.
Проблема в том, что tippy.js добавляет свой тултип в html после того, как я непосредстсвенно его вызываю.
Мне нужно, чтобы при нажатии кнопки внутри данного тултипа происходило действие (записывался текст в textarea), но никак прослушать событие я не могу. Вернее, могу, но оно дублируется.
Пытался делать onclick
у кнопки, $('#answers_0').bind('click', ...)
когда вызывается onShown()
у экземпляра тултипа, но оно дублируется, даже после $('#answers_0').unbind('click')
'use strict';
var container = document.querySelector('#content > div > div > div > div.chat.chat-float > div.chat-form > form');
var clip = document.querySelector('#content > div > div > div > div.chat.chat-float > div.chat-form > form > div.chat-form-btn');
var button = document.createElement('div');
button.className = 'chat-form-attach';
button.innerHTML = '<button type="button" id="cutButton" class="btn btn-default chat-btn-image"><i class="fas fa-align-justify"></i></i></button>'
container.insertBefore(button, clip);
var answers = [{name: '123', text: 'test'}];
tippy('#cutButton', {
content: `<div class="tabs">
<input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
<label for="tab-btn-1">Ответы</label>
<input type="radio" name="tab-btn" id="tab-btn-2" value="">
<label for="tab-btn-2 ml-auto">Парсинг</label>
<div id="content-1">
<ul class="list-group overflow-auto">`
+ answers.map((el, index) => {return '<li class="list-group-item" id="answer_' + index + '">' + el.name + '</li>'}) +
`</ul>
</div>
<div id="content-2">
Содержимое 2...
</div>
</div>`,
allowHTML: true,
interactive: true,
trigger: 'click',
moveTransition: 'transform 0.2s ease-out',
});
//--- Activate the newly added button.
document.getElementById ("cutButton").addEventListener (
"click", ButtonClickAction, false
);
function sendAnswer (text) {
//$('#comments > textarea').val(text);
console.log(text);
}
function ButtonClickAction (zEvent) {
console.log('click!');
}
Пробовал такой вариант:
tippy('...', {
content :`...`,
onShown() {
answers.map((el, index) => {
$('#answer_' + index).bind('click', () => {return sendAnswer(el.text)});
})
},
onHidden() {
answers.map((el, index) => {
$('#answer_' + index).unbind('click');
})
},
})
$(...).unbind()
не выполняется приonHidden()
.unbind()
, ниonHidden()