如何将Twitter Bootstrap工具提示绑定到动态创建的元素？-Java 学习之路

250

我正在使用Twitter引导工具提示与javascript如下：

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

我的标记看起来像这样：

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

这工作正常，但我动态添加 <a> 元素，工具提示不是't showing up for those dynamic elements. I know it'，因为我只在文档加载完典型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（）行 . 那么，当页面首次加载并匹配该选择器时，存在的元素是否会以两次工具提示结束？

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

7 回答

13
而不是在完整的身体中搜索它 . 我可以在这样的场景中使用已经可用的动态 Headers 选项：
```
$btn.tooltip({
  title: function(){
    return $(this).attr('title');
  }
});
```
回复于 2024-04-27T12:13:50+08:00
7
对我来说，只捕捉mouseenter事件有点儿麻烦，工具提示没有正确显示/隐藏 . 我不得不写这个，它现在完美地工作：
```
$(document).on('mouseenter','[rel=tooltip]', function(){
    $(this).tooltip('show');
});

$(document).on('mouseleave','[rel=tooltip]', function(){
    $(this).tooltip('hide');
});
```
回复于 2024-04-27T12:13:50+08:00

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

我的解决方案

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

回复于 2024-04-27T12:13:50+08:00

试试这个：

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

回复于 2024-04-27T12:13:50+08:00

16
如果您要初始化多个工具提示配置，这对我来说很有用 .
```
$("body").tooltip({
    selector: '[data-toggle="tooltip"]'
});
```
然后，您可以使用 data 属性在各个元素上设置属性 .
回复于 2024-04-27T12:13:50+08:00
123
我在这里发布了更长的答案：https://stackoverflow.com/a/20877657/207661

TL; DR：您只需要在文档就绪事件中运行一行代码：
```
$(document.body).tooltip({ selector: "[title]" });
```
其他答案中建议的其他更复杂的代码似乎没有必要（我已经使用Bootstrap 3.0进行了测试） .
回复于 2024-04-27T12:13:50+08:00

469

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

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

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

7 回答

相关问题