关于jquery：如何将Twitter引导工具提示绑定到动态创建的元素？


How do I bind Twitter Bootstrap tooltips to dynamically created elements?

我使用JavaScript的Twitter Bootstrap工具提示如下：

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

我的标记如下：

1
<i class="icon-file">

这很好，但是我动态地添加了元素，并且这些动态元素没有显示工具提示。我知道这是因为当使用典型的jquery $(document).ready(function()功能加载完文档时，我只绑定一次.tooltip()。

如何将其绑定到动态创建的元素？通常我会通过jquery live()方法来实现这一点。但是，我用来绑定的事件是什么？我只是不知道如何将bootstrap.tooltip()与jquery.live()挂钩。

我已经找到了一种方法来实现这一目标：

1
2
3
4
5
6
7
8
9
10
11
12
/* 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()行。那么，当页面第一次加载并与选择器匹配时存在的元素是否会两次以工具提示结束？

我看不出这种方法有什么问题。我只是在寻找一个最佳实践或对行为的理解。

相关讨论

试试这个：

1
2
3
$('body').tooltip({
    selector: '[rel=tooltip]'
});
相关讨论

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

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

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

相关讨论

对我来说，只有捕捉鼠标器事件有点笨拙，而且工具提示没有正确显示/隐藏。我必须写这个，现在它的工作非常完美：

1
2
3
4
5
6
7
$(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:您只需要在文档就绪事件中运行一行代码：

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

其他答案中建议的其他更复杂的代码似乎没有必要(我用bootstrap 3.0测试过)。

相关讨论

对我来说，JS再现了与葆拉同样的问题。

我的解决方案：

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

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

1
2
3
4
5
$btn.tooltip({
  title: function(){
    return $(this).attr('title');
  }
});

我发现这些答案的组合给了我最好的结果-允许我仍然定位工具提示并将其附加到相关容器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('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：

1
2
3
<button rel="tooltip" class="btn" data-placement="bottom" data-container=".some-parent" title="Show Tooltip">
    <i class="icon-some-icon">
</button>