jQuery　読み込んだ外部htmlファイル内での関数の実行ができない

締切済

質問者：iwatuturuturu
質問日時：2010/09/05 15:20
回答数：1件

jQuery　読み込んだ外部htmlファイル内での関数の実行ができない

お世話になります。
iwatuturuturu と申します。

jQueryで読み込んだ外部htmlファイル内での関数の実行ができません。
［index.html］にてjQueryのloadを使用し、同じ階層内の［basic.html］のファイルを読み込んでいます。
slideToggleをしようしてアコーディオンをつけたいのですが、外部htmlの［basic.html］のアコーディオンみ動きません。

【ソース［index.html］】------------------------------------------------------------
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script>
$(function(){
//外部ファイルの読み込み
$("#basic").load("basic.html");

// アコーディオン
$('dt').click(function(){
$(this).next().slideToggle('slow');
});
});
</script>
</head>
<body>
<dl class="accordion">
<dt>アコーディオン</dt>
<dd>ここの表示非表示が切り替わる</dd>
</dl>
<div id="basic"></div>
</body>
</html>

【ソース［basic.html］】------------------------------------------------------------
<div style="border:1px solid #666666">
<p>読み込み込まれるテキスト</p>
<dl class="accordion">
<dt>ここをクリック</dt>
<dd>ここの表示非表示が切り替わる</dd>
</dl>
</div>
------------------------------------------------------------------------------------

もともと外部より読み込まれたファイル内のjavasicriptは実行されない仕様なのでしょうか？
また、他のやり方で同じ動作を実現する方法などありましたらご教授お願い致します。

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： mtaka2
回答日時：2010/09/05 17:35

おそらく読み込みのタイミングの問題でしょう。

load メソッドは、非同期に読み込みを実行します。
loadメソッド呼び出しが終了した時点では、まだ外部htmlは読み込まれていません。

そのloadメソッド呼び出し直後に「$('dt').click(function(){…」を実行した場合、
loadによる読み込みはまだできていないため、そのhtmlに対するイベントの設定はできないことになります。

そういう場合は、liveメソッドを使えば、loadメソッドなどで動的に書き換えた要素に対してもイベントを関連づけることができます。具体的には、

> $('dt').click(function(){$(this).next().slideToggle('slow');});
の代わりに
> $('dt').live('click', function(){$(this).next().slideToggle('slow');});
とします。

また、別の方法としては、load の第3引数で読み込み完了後の処理を記述できますから、
それを指定して、読み込み後に再度イベントの設定をやりなおす、という手もあります。