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

我正在使用带有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（）方法来做到这一点。但是，我用来绑定的事件是什么？我只是不确定如何将bootstrap .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（）行。那么，页面首次加载并与该选择器匹配时存在的元素是否以工具提示两次结束？

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

试试这个：

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

如果您要初始化多个工具提示配置，那么这对我来说效果很好。

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

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

对我来说，仅捕获mouseenter事件有点麻烦，并且工具提示未正确显示/隐藏。我必须编写此代码，并且现在可以正常运行：

$(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.0中进行了测试）。

对我来说，这个js重现了Paola发生的相同问题

我的解决方案：

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

而不是全身搜索。我认为可以使用在这种情况下已经可用的动态标题选项：

$btn.tooltip({
  title: function(){
    return $(this).attr('title');
  }
});

我发现这些答案的组合给了我最好的结果-使我仍然可以放置工具提示并将其附加到相关的容器上：

$('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>