如何将Twitter Bootstrap工具提示绑定到动态创建的元素？

Question

我使用Twitter引导工具提示与javascript如下:

$('a[rel=tooltip]').tooltip();

我的标记看起来像这样:

<a rel="tooltip" title="Not implemented" class="btn"><i class="icon-file"></i></a>

这工作正常,但我<a>动态添加元素,工具提示没有显示那些动态元素.我知道这是因为我只在文档加载了典型的jquery $(document).ready(function()功能时绑定.tooltip()一次.

如何将其绑定到动态创建的元素？通常我会通过jquery live()方法执行此操作.但是,我用来绑定的事件是什么？我只是不确定如何使用jquery .live()连接bootstrap .tooltip().

我发现有一种方法可以使这项工作是这样的:

/* 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()行.那么,当页面首次加载并匹配该选择器时,存在的元素是否会以两次工具提示结束？

我认为这种方法没有任何问题.我只是在寻找最佳实践或理解行为.

Answer 1

试试这个:

$('body').tooltip({
    selector: '[rel=tooltip]'
});

Answer 2

如果您要初始化多个工具提示配置,这对我来说很有用.

$("body").tooltip({
    selector: '[data-toggle="tooltip"]'
});

然后,您可以使用data属性在单个元素上设置属性.

Answer 3

对我来说,只捕捉mouseenter事件有点儿麻烦,工具提示没有正确显示/隐藏.我不得不写这个,它现在完美地工作:

$(document).on('mouseenter','[rel=tooltip]', function(){
    $(this).tooltip('show');
});

$(document).on('mouseleave','[rel=tooltip]', function(){
    $(this).tooltip('hide');
});

Answer 4

我在这里发布了更长的答案:https://stackoverflow.com/a/20877657/207661

TL; DR:您只需要在文档就绪事件中运行一行代码:

$(document.body).tooltip({ selector: "[title]" });

其他答案中建议的其他更复杂的代码似乎没有必要(我已经使用Bootstrap 3.0进行了测试).

Answer 5

对我来说,这个js再现了与Paola相同的问题

我的解决方案

$(document.body).tooltip({selector: '[title]'})
.on('click mouseenter mouseleave','[title]', function(ev) {
    $(this).tooltip('mouseenter' === ev.type? 'show': 'hide');
});