Bootstrap Tooltip "Uncaught TypeError: Cannot read property 'trigger' of null"

Question

当我尝试显示新工具提示时，在销毁旧工具提示后，我在 Chrome 控制台中得到 "Uncaught TypeError: Cannot read property 'trigger' of null"。

然后，当我挖掘 bootstrap 代码时，我发现了这个：我怀疑这是我得到的异常的原因：

我在创建新工具提示时尝试使用 "selector" 和 "container" 属性。一件有用的事情是在另一个按钮上添加一个事件侦听器，以销毁工具提示，这样当我再次单击注册时，它可以正常工作并且不会抛出任何异常。

示例可在（点击注册两次）找到：https://jsfiddle.net/08o4qgj5/1/ 代码：

$("form#register").on("click", "button[name='btnRegister']", function () {
    //Destroy tooltip if exists
    $("input[name='email']").tooltip('destroy');
    //Adds new one
    $("input[name='email']").tooltip({title: "CYKA BLYAAAAAAT, IDI NAHUI!",
        placement: 'bottom',
        template:'<div class="tooltip" role="tooltip">' +
        '<div class="tooltip-arrow"></div>' +
        '<div class="tooltip-inner"></div>' +
        '</div>'});
    //Shows it
    $("input[name='email']").tooltip('show');
});

$("form#register").on("click", "button[name='btnDestroy']", function () {
    //Destroys tooltip
  $("input[name='email']").tooltip('destroy');
});

在我给你看的例子中，这样做有点没用，因为只有 1 个输入。但是在我的网站上，我想要发生的是：

销毁任何可能存在的工具提示
验证用户输入
如果输入无效，我想向该输入元素添加一个新的工具提示

我发现有人遇到的最相似的问题是：但这并没有为我解决问题。

提前致谢。

Answer 1

由于销毁一个 html 元素可能需要一些时间，并且它的某些部分销毁甚至可能是异步处理的，当您到达新工具提示的 creation/display 时，它可能是在途中陷入了一种不受欢迎的状态。

将工具提示的初始化和显示包装在 setTimeout(f(), t) 中 t [250, 400] 在这里很好用，检查 this JSFiddle。 你不应该使用你的销毁按钮

setTimeout(function() {
    $("input[name='email']").tooltip({title: "CYKA BLYAAAAAAT, IDI NAHUI!",
                                    placement: 'bottom',
                                    template:'<div class="tooltip" role="tooltip">' +
                                    '<div class="tooltip-arrow"></div>' +
                                    '<div class="tooltip-inner"></div>' +
                                    '</div>'});

    //Shows it
    $("input[name='email']").tooltip('show');
  }, 250);
});

Answer 2

接受的答案可能无法解决此问题。 BS 工具提示和弹出窗口的问题是，如果您手动触发它们，您必须指定您手动触发它们，否则 BS 将创建目标元素事件，也就是 creates/destroys 工具提示。

...
placement: 'bottom',
trigger: 'manual',
...

Bootstrap Tooltip "Uncaught TypeError: Cannot read property 'trigger' of null"

Bootstrap Tooltip "Uncaught TypeError: Cannot read property 'trigger' of null"

exception

tooltip

flicker

twitter-bootstrap-3