如何在jQuery点击函数中添加并显示引导工具提示

How to add and show a Bootstrap tooltip inside a jQuery click function?

本文关键字：添加 显示 工具提示 函数 jQuery      更新时间：2023-09-26

我正试图在jQuery中的单击函数中添加并显示Bootstrap 3工具提示。

当我使用匿名函数作为点击处理程序时，它工作得很好，但如果我试图将代码放入命名函数中，我会得到错误TypeError: undefined is not a function (evaluating '$button.tooltip(...

JS文件的内容如下。这是在jQuery和bootstrap.min.js.之后加载的

$(function() {
    function confirmClick(event) {
        event.preventDefault();
        $button = event.target;
        console.log($button);
        $button.tooltip({
            title: 'Are you sure?',
            trigger: 'manual',
        }).tooltip('show');
        $button.unbind('click');
    }
    $('.btn-confirm').click(confirmClick);
})

最终，我希望使用setTimeout重新添加单击处理程序，并在X秒后隐藏工具提示。

最终行为将是用户单击按钮，出现一个工具提示，询问"你确定吗？"如果他们在X秒内再次单击，链接将被跟踪。否则，工具提示将被隐藏，并为下次单击准备相同的操作。

我也尝试过使用手动或单击触发器添加工具提示，然后从confirmClick（）函数中操作它，但任何从命名的单击函数中点击.titrip的尝试似乎都失败了。

您需要使用jQuery选择器包装您的目标以使用.tooltip()。

执行$button = $(event.target);而不是$button = event.target;。

如果并且仅当变量存储了jQuery对象，则用$预处理变量。

相关文章：