3

私は特に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ドキュメント自体に正確なことを書いてみましたが、うまくいきました。私は何が欠けていますか？

4

1 に答える 1

4

まず、innerHTML をテキストとして使用して DOM に挿入された Script タグは実行されません。スクリプトは innerHTML で挿入できますを参照してください。スクリプト タグの背景を簡単に説明すると、これらはデフォルトでページロード時に同期的に解析されます。つまり、以前のスクリプト タグから始まり、DOM ツリーを下っていきます。deferただし、この動作は、およびasync属性を介して変更できます。これについては、 David Walsh の投稿で最もよく説明されています。

ただし、スクリプト ノードを作成し、それに属性ノードとコンテンツを割り当て、このノードを DOM 内のノード (または DOM に挿入された別のノード) に追加することはできます (ここでは、前述の SO リンクの回答 (ここ: SO 回答) ）。

次に、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(); });
于 2013-08-26T12:26:50.267 に答える