jquery - 将事件绑定(bind)到 TippyJS HTML 工具提示内的元素

Question

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

我设置了一个这样的示例:

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，但无法使其工作。我尝试将按钮单击事件绑定(bind)到 Tippy 'show' 事件中，如下所示，但它再次不起作用:

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

任何人都可以建议如何让此事件绑定(bind)起作用吗？

非常感谢。

Answer 1

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

其次，在你的 Codepen 中你使用的是 TippyJS 0.3.0 版本，在我的 Codepen 中我使用的是最新版本 2.5.4。我无法确定 onShown 事件是否存在于 2 个主要版本的库中。

Working Codepen