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(); });

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

1 个答案: