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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 02:37:27  来源:igfitidea点击:

How to bind bootstrap tooltip on dynamic elements

jquerytwitter-bootstrap-3tooltip

提问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 selectorproperty. 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');
});

DEMO

演示

回答by Aliti

Try this:

尝试这个:

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