将事件绑定到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>

联署材料：

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事件不一样，该事件在工具提示动画开始时触发。

其次，在您的代码中，您使用的是0.3.0版本的TippyJS，在我的代码中，我使用的是最新版本2.5.4。我不能确定onShown事件是否存在于库2的主要版本中。

工作代码