javascript - 使用 javascript 创建元素时无法使 Bootstrap 工具提示工作

Question

我对 jquery 尤其是 js 还是个新手，所以我希望我没有犯一个愚蠢的错误。我有以下 js 代码:

var speechText = "Purpose of use:<br/>"; 
speechText += "<script>$(function(){$(\".simple\").tooltip();});</script>";
speechText += "<a href=\"#\" class=\"simple\" title=\"day to day use\" data-placement=\"top\" data-toggle=\"tooltip\">simple use</a>";
speechElement.innerHTML = speechText;

此函数更改 html 页面上元素的内容。调用此函数时一切正常，包括显示链接“简单使用”，但工具提示没有出现。我尝试在 html 文档本身上写下确切的内容，并且成功了。我错过了什么？

Answer 1

首先，使用 innerHTML 作为文本插入到 DOM 中的脚本标签将不会执行。参见 Can Scripts be inserted with innerHTML .只是脚本标签的一些背景知识，默认情况下，它们在页面加载时以同步方式进行解析，这意味着从较早的脚本标签开始并沿 DOM 树下降。然而，这种行为可以通过 defer 和 async 属性来改变，最好在 David Walsh's post. 上解释。

但是，您可以按照上述 SO 链接(此处: SO answer ).

其次，您不需要将那段 JavaScript 注入(inject)到 DOM 中，您只需在字符串连接的上下文中使用该插件分配即可。因此，作为示例，您可以像这样重构您的代码:

HTML

var speechText = "Purpose of use:<br/>";
speechText += "<a href=\"#\" class=\"simple\" title=\"day to day use\" data-placement=\"top\" data-toggle=\"tooltip\">simple use</a>";
speechElement.innerHTML = speechText;
$(function(){ $(".simple").tooltip(); });