如何在 jQuery 单击函数中添加和显示 Bootstrap 工具提示？

Question

我正在尝试在 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 秒后隐藏工具提示。

最终行为将是用户单击按钮，出现工具提示询问 "Are you sure?"，如果他们在 X 秒前再次单击，则会出现 link。否则，工具提示将被隐藏，并为下一次单击准备相同的操作。

我也尝试过使用手动或点击触发器添加工具提示，然后从 confirmClick() 函数中对其进行操作，但是从命名点击函数中点击 .tooltip 的任何尝试似乎都失败了。

Answer 1

您需要用 jQuery 选择器包裹您的目标才能使用 .tooltip()。

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

当且仅当您的变量存储 jQuery 对象时，在您的变量前添加 $。

如何在 jQuery 单击函数中添加和显示 Bootstrap 工具提示？

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

javascript

jquery

twitter-bootstrap

twitter-bootstrap-2