0

我想使用 Tooltipster 插件，它单击正文中的元素以显示工具提示，并且我希望在工具提示内有一个关闭按钮来关闭它。

但是我使用 Jquery click() 函数来处理它，但它不会被触发。我在这篇文章中尝试了解决方案。它仅在工具提示由悬停事件触发时才起作用。

单击工具提示中的链接时，Tooltipster 插件未触发 jquery 功能

在 jsfiddle 中使用 hover 的原始解决方案

trigger: 'hover',

而是使用单击显示工具提示

trigger: 'click',

http://jsfiddle.net/bCqyL/7/

它不会在 jquery 块中触发任何点击事件。它只能由普通的 javascript 函数捕获。我检查了它应该是 Tooltipster 插件中的一些代码被锁定并在点击触发模式下捕获提示内的所有“click()”事件。

在原始解决方案中使用代码时，我尝试了其他事件，例如单选按钮的 onchange 事件被触发

4

2 回答 2

1

@Evan 是对的。您的 Tooltip 不存在于 DOM 中，并且您无法对其绑定/委托任何操作（即使您一直回到$(document)DOMReady 之后）。

如果您在工具提示中的关闭按钮之后尝试以下代码，它对我有用（和 JSFiddle！）：

JavaScript

$('.tooltip').tooltipster({
    // Required, but have a fiddle around
    'interactive': true,
    'contentAsHTML': true,
    'autoClose': true,
    'trigger': 'click',
    'onlyOne': true,

    // ...

    // The coup de grâce ...
    'functionReady': function(){
        $('.tooltipster-default .close').on('click', function(e){
            e.preventDefault();
            $('body').click();
        });
    }
});

HTML

<span class="tooltip" title="<h3>Title <a title='Close' href='#' class='close'></a></h3><p>This is my tooltip content!">I have a tooltip!</span>

JSFiddle

http://jsfiddle.net/hpKST/1/

为什么有效

每当有人在交互式工具提示之外单击时，组合autoClose和trigger帮助关闭工具提示。functionReady回调允许您绑定一个函数以利用这一点，并委托一个函数在 Tooltipster 打开时单击，body从而关闭 Tooltip。

我希望这有帮助！:)

于 2014-04-03T11:51:19.480 回答
0

这是因为当您尝试绑定函数时，DOM 中不存在 HTML。而是将您的内容作为 jQuery 对象插入并在其上进行绑定。

编辑：我的回答是错误的，因为用户有一个委托处理程序，我错过了。我在这里给出了正确的答案：https ://github.com/iamceege/tooltipster/issues/145

于 2014-03-20T16:09:45.770 回答