将事件绑定到 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!');
});

有个working CodePen here.

我想在单击工具提示内容中的按钮时执行 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 个主要版本。

Working Codepen

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

Bind events to elements inside TippyJS HTML tooltip

jquery

tippyjs