1

Я хочу сделать меню на внешнем сайте, в котором я смогу нажимать кнопки. Проблема в том, что кнопки я в нем нажимать не могу. Делал при помощи 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');
    })
  },
})
4
  • "но оно дублируется" - ??
    – user176262
    11 сен 2020 в 15:47
  • @Igor $(...).unbind() не выполняется при onHidden()
    – wilddip
    11 сен 2020 в 15:56
  • в коде вопроса нет ни .unbind(), ни onHidden()
    – user176262
    11 сен 2020 в 16:17
  • @Igor Добавил код
    – wilddip
    11 сен 2020 в 18:10

1 ответ 1

2

Это id?

$('#answer_' + index)
   ^
1
  • Я забыл указать это в коде, но это было написано правильно ($('#answer_' + index).unbind(...)). Смысл в том, что в функции sendAnswer я банально поставиль вывод события в консоль, и вот, что получил при повторном открытии меню и нажатии на одну кнопку
    – wilddip
    11 сен 2020 в 18:30

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.