使用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.

最好的解释不过，您可以创建一个脚本节点，将其指定属性节点和内容，该节点追加到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(); });