将事件绑定到TippyJS HTML工具提示中的元素

Question

我正在使用TippyJS来显示HTML工具提示。 我在工具提示中有一些交互式内容，因此我想将事件绑定到那些元素。 由于工具提示内容是由Tippy动态生成的，因此标准jQuery事件绑定似乎无效。

我已经建立了一个这样的例子：

HTML：

<button id="t1" class="btn tippy" >hover here</button>

<div id="tip-content" style="display: none;">
    Trigger event when clicking this 
    <button class="btn btn-click">button</button>
</div>

JS：

new Tippy('#t1',{
  position:'top',
  interactive:'true',
  html: '#tip-content'
});

$('.btn-click').click(function(){
  console.log('clicked!');
});

这里有一个工作的CodePen 。

当单击工具提示内容中的按钮时，我想创建一个console.log ，但无法使其正常工作。 我试图将按钮单击事件绑定到Tippy'show'事件内部，如下所示，但同样无法正常工作：

onShow(instance) {
    $('.btn-click').click(function(){
      console.log('clicked!');
    });
  }

谁能建议如何使此事件绑定起作用？

非常感谢。

Answer 1

TippyJS有一个onShown事件，该事件会在工具提示完全显示时触发，这与您使用的onShow事件不同，后者在工具提示动画开始时触发。

其次，在您的Codepen中，您正在使用TippyJS的0.3.0版本，在我的Codepen中，我正在使用最新的2.5.4版本。 我不能肯定地说onShown事件存在于库的2个主要版本中。

工作码笔