我使用Twitter引导工具提示与javascript如下:
$('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()方法来做到这一点。但是，我用来绑定的事件是什么?我只是不确定如何将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').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>
我发现这些答案的组合给了我最好的结果-允许我仍然定位工具提示，并将其附加到相关的容器:
$('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>
