2

我正在使用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!');
    });
  }

谁能建议如何让这个事件绑定工作？

非常感谢。

4

1 回答 1

4

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

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

工作密码笔

于 2018-08-23T15:43:44.010 回答