小编典典

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

all

我正在使用带有 javascript 的 Twitter 引导工具提示,如下所示:

$('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() 方法来做到这一点。但是,我用来绑定的事件是什么?我只是不确定如何将引导程序
.tooltip() 与 jquery .live() 连接起来。

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

/* 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();
});

这可行,但似乎有点骇人听闻。我还在 $(ready) 调用中调用了完全相同的 .tooltip()
行。那么,页面第一次加载并匹配该选择器时存在的元素是否最终会出现两次工具提示?

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


阅读 79

收藏
2022-04-26

共1个答案

小编典典

试试这个:

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