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 的 Script 标签不会执行。请参阅可以使用 innerHTML 插入脚本。只是脚本标签的一些背景知识，默认情况下，它们在页面加载时以同步方式解析，这意味着从早期的脚本标签开始，沿着 DOM 树向下。然而，这种行为可以通过defer和async属性来改变，最好在David Walsh 的帖子中解释。

但是，您可以创建一个脚本节点，为其分配属性节点和内容，并将此节点附加到 DOM 中的一个节点（或插入到 DOM 中的另一个节点），如上述 SO 链接中的答案所建议的（此处：SO answer）。

其次，您不需要将那段 JavaScript 注入 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(); });