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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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