jquery - Can't make Bootstrap tooltip work when creating elements with javascript -
i'm pretty new jquery in particular , js in general, hope didn't make silly mistake. have following js code:
var speechtext = "purpose of use:<br/>"; speechtext += "<script>$(function(){$(\".simple\").tooltip();});</script>"; speechtext += "<a href=\"#\" class=\"simple\" title=\"day day use\" data-placement=\"top\" data-toggle=\"tooltip\">simple use</a>"; speechelement.innerhtml = speechtext;
this function changes content of element on html page. when calling function works, including displaying link "simple use", tooltip doesn't appear. tried writing exact thing on html document itself, , worked. missing?
first, script tags inserted dom using innerhtml text, not execute. see can scripts inserted innerhtml. background on script tags, they're parsed on pageload default in synchronous manner meaning beginning earlier script tags , descending down dom tree. behaviour can altered via defer
, async
attributes, best explained on david walsh's post.
you can create script node, assign attribute nodes , content , append node node in dom (or node inserted dom) suggested answer in aforementioned link (here: so answer).
secondly, don't need inject piece of javascript dom, can use plugin assignment in context of string concatenation. example might refactor code this:
html
var speechtext = "purpose of use:<br/>"; speechtext += "<a href=\"#\" class=\"simple\" title=\"day day use\" data-placement=\"top\" data-toggle=\"tooltip\">simple use</a>"; speechelement.innerhtml = speechtext; $(function(){ $(".simple").tooltip(); });
Comments
Post a Comment