jQuery 如何在动态元素上绑定引导工具提示
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/24655291/
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 to bind bootstrap tooltip on dynamic elements
提问by user1995781
When using Bootstrap tooltip, we need to write something like this to have tooltip functionality:
使用 Bootstrap 工具提示时,我们需要编写类似这样的内容以具有工具提示功能:
$(".showtooltip").tooltip();
But the problem is, we need to rerun that code every time when new content is loaded via ajax. Is there anyway to run the code for once and auto apply the tooltip when new element is loaded?
但问题是,每次通过 ajax 加载新内容时,我们都需要重新运行该代码。无论如何运行一次代码并在加载新元素时自动应用工具提示?
Thank you.
谢谢你。
回答by Elfayer
You need to use selector
property.
See on the documentation:
你需要使用selector
财产。请参阅文档:
"If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See thisand an informative example."
“如果提供了选择器,工具提示对象将被委派给指定的目标。实际上,这用于启用动态 HTML 内容以添加工具提示。请参阅此内容和信息丰富的示例。”
JS example code :
JS 示例代码:
$('body').tooltip({
selector: '.createdDiv'
});
$('#add-button').click(function() {
$('<div class="createdDiv" data-toggle="tooltip" title="Some tooltip text!">Hover over me</div>').appendTo('#container');
});
回答by Aliti
Try this:
尝试这个:
$('body').tooltip({
selector: '[data-toggle="tooltip"]'
});