Firefox 中带有 Ajax 注入元素的 Twitter 引导工具提示答案

【问题标题】：Twitter Bootstrap Tooltip with Ajax Injected Elements in FirefoxFirefox 中带有 Ajax 注入元素的 Twitter 引导工具提示
【发布时间】：2013-03-01 02:23:02
【问题描述】：

我正在使用 AJAX 将元素注入 DOM：

$.ajax({
    url: 'foo.html',
    type: 'post',
    data: { foo: "bar"},
    success: function (html) {

        $("#foo").html(html);
        $('[data-toggle="tooltip"]').tooltip();
    }
});

工具提示似乎不适用于 Firefox 中 button 包围的 DOM 元素（在 V19.0 上测试）

Js 小提琴：http://jsfiddle.net/cyberjar09/4nUMu/1/

我注意到，当我删除按钮元素外的图标元素时，Firefox 又开始工作了。

我能够从 Firebug 控制台查询元素（它们存在于 DOM 中）

$('[data-toggle="tooltip"]')

怎么了？

我通常会在 DOM 中看到一个 <div class="tooltip" ...> 元素作为我要在其上执行工具提示的元素的同级元素，但对于我在 Firefox 中测试的动态元素不会发生这种情况

IE 9 和 Chrome 25 似乎运行良好

【问题讨论】：

你能在调用工具提示之前做一个console.log($('[data-toggle="tooltip"]'))，看看当时有多少元素出现
正如问题中已经提到的，我能够从 Firebug 控制台查询元素 换句话说，我能够在控制台日志中看到元素并且我能够从控制台日志的结果中突出显示它们
即在上述代码正确执行后，我问的是从firefox端更新dom树是否有延迟。这就是为什么我要求在 $("#foo").html(html); 和 $('[data-toggle="tooltip"]').tooltip(); 之间添加 console.log()
@ArunPJohny ：是的，我可以看到 console.log() 中的元素；
我什至做了一个 setTimeout(..., 800) 但这似乎不是竞争条件问题

标签： firefox twitter-bootstrap tooltip

【解决方案1】：

Bootstrap 团队在 GitHub 上将其视为合法问题。现在已经关闭了： https://github.com/twitter/bootstrap/issues/7129

【讨论】：