当按钮或任何点击发生时，Tooltipster 插件不会触发 jquery 功能答案

【问题标题】：Tooltipster plugin not firing jquery function when button or any click even occur当按钮或任何点击发生时，Tooltipster 插件不会触发 jquery 功能
【发布时间】：2014-03-20 15:23:29
【问题描述】：

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

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

Tooltipster plugin not firing jquery function when link in in the tooltip is clicked

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

trigger: 'hover',

使用点击来显示工具提示

trigger: 'click',

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

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

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

【问题讨论】：

标签： javascript jquery click jquery-tooltip tooltipster

【解决方案1】：

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

如果您在工具提示的内部关闭按钮之后，请尝试以下代码，它对我有用（还有 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。

我希望这会有所帮助！ :)

【讨论】：

如果你有多个tooltips并且想要避免ready函数上的命名空间冲突，@987654329@回调的第二个参数是初始化的tooltip的内容。所以你可以做类似function (tooltip, contents){ contents.find('.close').on( ...等的事情。

【解决方案2】：

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

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

【讨论】：

我的代码是在 JQUERY 中插入 HTML 内容。