如何将Twitter Bootstrap工具提示绑定到dynamic创build的元素？
我正在使用JavaScript的Twitter引导工具提示，如下所示：
$('a[rel=tooltip]').tooltip(); 我的标记看起来像这样：
<a rel="tooltip" title="Not implemented" class="btn"><i class="icon-file"></i></a>
这工作正常，但我dynamic地添加<a>元素和工具提示不显示这些dynamic元素。 我知道这是因为我只绑定.tooltip（）一次，当文档完成加载典型的jquery $(document).ready(function()function。
我如何将它绑定到dynamic创build的元素？ 通常我会通过jquery live（）方法来做到这一点。 但是，我用来绑定的事件是什么？ 我只是不知道如何挂钩引导.tooltip（）与jQuery的.live（）。
我find了一种方法来使这项工作是这样的：
/* Add new 'rows' when plus sign is clicked */ $("a.add").live('click', function () { var clicked_li = $(this).parent('li'); var clone = clicked_li.clone(); clone.find(':input').each(function() { $(this).val(''); }); clicked_li.after(clone); $('a[rel=tooltip]').tooltip(); });
这工作，但似乎有点hackish。 我也调用$（ready）调用完全相同的.tooltip（）行。 那么，当页面第一次加载并且匹配那个select器时，存在的元素是否会以tooltip结束呢？
我没有看到这种方法的任何问题。 我只是在寻找最佳的做法或理解行为。
试试这个：
$('body').tooltip({ selector: '[rel=tooltip]' });
如果你有多个工具提示configuration，你想要初始化，这对我很好。
$("body").tooltip({ selector: '[data-toggle="tooltip"]' });
然后可以使用data属性在单个元素上设置属性。
对我来说，只有抓住mouseenter事件是有点bug，而工具提示没有正确显示/隐藏。 我不得不写这个，现在它工作得很好：
$(document).on('mouseenter','[rel=tooltip]', function(){ $(this).tooltip('show'); }); $(document).on('mouseleave','[rel=tooltip]', function(){ $(this).tooltip('hide'); });
我已经张贴更长的答案在这里： https : //stackoverflow.com/a/20877657/207661
TL; DR：您只需要在文档就绪事件中运行的一行代码：
$(document.body).tooltip({ selector: "[title]" });
在其他答案中提出的其他更复杂的代码似乎并不必要（我已经用Bootstrap 3.0testing过）。
对我来说，这个js再现了和Paola一样的问题
我的解决scheme
$(document.body).tooltip({selector: '[title]'}) .on('click mouseenter mouseleave','[title]', function(ev) { $(this).tooltip('mouseenter' === ev.type? 'show': 'hide'); });
我发现这些答案的组合给了我最好的结果 – 让我仍然定位工具提示，并将其附加到相关的容器：
$('body').on('mouseenter', '[rel=tooltip]', function(){ var el = $(this); if (el.data('tooltip') === undefined) { el.tooltip({ placement: el.data("placement") || "top", container: el.data("container") || false }); } el.tooltip('show'); }); $('body').on('mouseleave', '[rel=tooltip]', function(){ $(this).tooltip('hide'); });
相关HTML：
<button rel="tooltip" class="btn" data-placement="bottom" data-container=".some-parent" title="Show Tooltip"> <i class="icon-some-icon"></i> </button>
