.load() でテンプレート使用した際のスクリプト呼び出しについて

トップページのヘッダー、フッター、スマホのグローバルナビ部分のそれぞれ囲った要素を.load() を使用し、テンプレート化して他のサブページに使用しています。
ただ、.load()でサブページに呼び出されたテンプレートのscriptが全く反応しません。
色々調べていると『セレクタ指定入りのURLによって.load()を呼び出した場合、要素が更新される前にスクリプトは取り除かれてしまい実行されることはありません。』という記事を発見しました。
確かにセレクタ指定入りのURLなのでそれでスクリプトが取り除かれてると思うのですが、このテンプレートは是非使用したいです。
どなたか解決策ご存知でしたらお教えください。

行動規範の内容に同意します

回答1件

つまり、次のようなテンプレートがあって

html
1<div id="aaa">
2    <span>これは AAA です</span>
3</div>
4<div id="bbb">
5    <span>これは BBB です</span>
6</div>
7<script>
8alert("this is template.");
9</script>
10

次のように読み込んだときに script タグの中身を実行させたい、ということでしょうか？

javascript
1$('#content').load('template.html #aaa');

.load だと難しそうなので、.get で取得した後に、非表示の要素として一瞬だけ追加して即削除する、とかでどうでしょうか？

javascript
1$.get('template.html').then(function(data){
2    $('#content').empty().append($(data).filter('#aaa'));
3    $('<div>').hide().append(data).appendTo('body').remove();
4});

投稿2015/08/06 00:15

ngyuki

総合スコア4514

退会済みユーザー

2015/08/18 04:33

回答ありがとうございます。 ngyuki様の解釈されてる通り、上記の読み込みのときにscriptを実行させたい感じです！ご提案いただいた記述で試そうとしたところ『 $('<div>').hide().append(data).appendTo('body').remove();』部分で記述エラーが出てしまうようです。。何かお分かりになるようでしたらご教示いただけると幸いです。