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

我正在使用像以下JavaScript的Twitter引导工具提示：

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

我的标记看起来像这样：

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

这工作正常，但我动态地添加<a>元素和工具提示不显示这些动态元素。 我知道这是因为我只绑定.tooltip（）一次，当文档完成加载典型的jquery $(document).ready(function()功能。

我如何将它绑定到动态创建的元素？ 通常我会通过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（）行。 那么，当页面首次加载并匹配该选择器时，存在的元素最终会以两次工具提示结束吗？

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

---

试试这个：

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

---

如果您有多个要初始化的工具提示配置，则适用于我。

$("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');
});

链接地址: http://www.djcxy.com/p/42493.html

上一篇: How do I bind Twitter Bootstrap tooltips to dynamically created elements?

下一篇: How may I reference the script tag that loaded the currently