- 締切済み
jQuery 読み込んだ外部htmlファイル内での関数の実行ができない
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は実行されない仕様なのでしょうか？ また、他のやり方で同じ動作を実現する方法などありましたらご教授お願い致します。 よろしくお願いいたします。
- iwatuturuturu
- お礼率100% (7/7)
- JavaScript
- 回答数1
- ありがとう数7
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- mtaka2
- ベストアンサー率73% (867/1179)
おそらく読み込みのタイミングの問題でしょう。 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引数で読み込み完了後の処理を記述できますから、 それを指定して、読み込み後に再度イベントの設定をやりなおす、という手もあります。
お礼
mtaka2さん ご回答ありがとうございます。 教えて頂きましたやり方で、正常に動きました！ 本当にありがとうございます！