jQuery 如何将 Twitter Bootstrap 工具提示绑定到动态创建的元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9958825/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I bind Twitter Bootstrap tooltips to dynamically created elements?
提问by durden2.0
I'm using Twitter bootstrap tooltips with javascript like the following:
我正在使用带有 javascript 的 Twitter 引导工具提示，如下所示：
$('a[rel=tooltip]').tooltip();
My markup looks like this:
我的标记如下所示：
<a rel="tooltip" title="Not implemented" class="btn"><i class="icon-file"></i></a>
This works fine, but I add <a>elements dynamically and the tooltips aren't showing up for those dynamic elements. I know it's because I only bind .tooltip() once when the document is finished loaded with the typical jquery $(document).ready(function()functionality.
这工作正常，但我<a>动态添加元素并且工具提示没有显示这些动态元素。我知道这是因为我只在文档加载完典型的 jquery$(document).ready(function()功能后绑定 .tooltip() 一次。
How can I bind this to dynamically created elements? Usually I would do this via the jquery live() method. However, what is the event that I use to bind? I'm just not sure how to hook up the bootstrap .tooltip() with jquery .live().
如何将其绑定到动态创建的元素？通常我会通过 jquery live() 方法来做到这一点。但是，我用来绑定的事件是什么？我只是不确定如何将引导程序 .tooltip() 与 jquery .live() 连接起来。
I've found one way to make this work is something like this:
我发现一种使这项工作的方法是这样的：
/* 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();
});
This works, but seems kind of hackish. I'm also calling the exact same .tooltip() line in the $(ready) call. So, do the elements that exist when the page first loads and match that selector end up with the tooltip twice?
这有效，但似乎有点hackish。我还在 $(ready) 调用中调用完全相同的 .tooltip() 行。那么，页面第一次加载并匹配该选择器时存在的元素是否会出现两次工具提示？
I don't see any problems with this approach. I'm just looking for a best practice or understanding of the behavior.
我认为这种方法没有任何问题。我只是在寻找最佳实践或对行为的理解。
回答by Christian Strang
Try this one:
试试这个：
$('body').tooltip({
selector: '[rel=tooltip]'
});
回答by rohitmishra
If you have multiple tooltip configurations that you want to initialise, this works well for me.
如果您有多个要初始化的工具提示配置，这对我来说效果很好。
$("body").tooltip({
selector: '[data-toggle="tooltip"]'
});
You can then set the property on individual elements using dataattributes.
然后，您可以使用data属性在单个元素上设置属性。
回答by Paola Cerioli
For me, only catching the mouseenter event was a bit buggy, and the tooltip was not showing/hiding properly. I had to write this, and it is now working perfectly:
对我来说，只捕捉 mouseenter 事件有点问题，工具提示没有正确显示/隐藏。我不得不写这个，现在它工作得很好：
$(document).on('mouseenter','[rel=tooltip]', function(){
$(this).tooltip('show');
});
$(document).on('mouseleave','[rel=tooltip]', function(){
$(this).tooltip('hide');
});
回答by Shital Shah
I've posted longer answer here: https://stackoverflow.com/a/20877657/207661
我在这里发布了更长的答案：https: //stackoverflow.com/a/20877657/207661
TL;DR: You need only one line of code that runs in document ready event:
TL;DR：您只需要一行在文档就绪事件中运行的代码：
$(document.body).tooltip({ selector: "[title]" });
Other more complicated code suggested in other answers don't seem necessary (I've tested this with Bootstrap 3.0).
其他答案中建议的其他更复杂的代码似乎没有必要（我已经用 Bootstrap 3.0 对此进行了测试）。
回答by Dg Jacquard
回答by Jaskaran Singh
Rather than search it in full Body. One could just use dynamic title option already available in such scenarios I think:
而不是在全身搜索它。我认为可以在这种情况下使用已经可用的动态标题选项：
$btn.tooltip({
title: function(){
return $(this).attr('title');
}
});
回答by mattgi
I found a combination of these answers gave me the best outcome - allowing me to still position the tooltip and attach it to the relevant container:
我发现这些答案的组合给了我最好的结果 - 允许我仍然放置工具提示并将其附加到相关容器：
$('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');
});
Relevant HTML:
相关 HTML：
<button rel="tooltip" class="btn" data-placement="bottom" data-container=".some-parent" title="Show Tooltip">
<i class="icon-some-icon"></i>
</button>
