- 締切済み
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引数で読み込み完了後の処理を記述できますから、 それを指定して、読み込み後に再度イベントの設定をやりなおす、という手もあります。
関連するQ&A
- 【jQuery】jQuery Masonry
この度jQueryで壁にぶつかり、質問させて頂きます。 現在開発中のWEBサービスにて、jQuery Masonryとアコーディオン機能を組み合わせたページを構築する流れとなっております。 画面イメージとしては・・ Pinterestにアコーディオン機能が付いており、各帯をクリックする毎に内容が表示される機能です。 【Point】横幅は制限がありますが、縦幅には制限が無く、アコーディオンが開閉する毎にグリッド部分の再構築（ムーブアクション）を行いたいのですが、それが上手くいきません。 参考サイト：http://goo.gl/QLQI7 実際のソース（抜粋）： <script> jQuery(function(){ var $container = $('#container'); $container.imagesLoaded( function(){ jQuery('#container').masonry({ itemSelector: '.item', isAnimated:true }); }); }); </script> <script> jQuery(function () { jQuery("dd").css("display","none"); jQuery("dl dt").click(function(){ var cont = jQuery(this).next(); if(jQuery(cont).css("display")=="none"){ jQuery("dd").slideUp("slow"); jQuery(cont).slideDown("fast"); jQuery("dt").removeClass("select"); jQuery(this).addClass("select"); } }).hover( function(){jQuery(this).addClass("over");} ),( function(){jQuery(this).removeClass("over");} ); }); </script> <div id="container"> ～ここから～ <div class="item"> <dl> <dt>タイトル1</dt> <dd>本文1</dd> <dt>タイトル2</dt> <dd>本文2</dd> <dt>タイトル3</dt> <dd>本文3</dd> </dl> </div> </div> ～ここまでがLoopで複数のデータが表示される～ なお、jQuery初心者でして具体的な構文までをサポート頂けますと幸いです。 よろしくお願い致します。
- ベストアンサー
- CSS
- アコーディオンjquery
ロリポップのサーバーにアコーディオンjqueryをおいています。 以下のように設置すると、項目をクリックしたときに 下に展開されるのですが chromeだと、左に余白ができてしまいます。 ie9だと、変に余白ができて、テキストがおかしな挙動します。。。 なぜでしょうか？ --------------- <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <script type="text/javascript" src="../jq01/jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function() { $("dd").hide(); $("dt").click(function() { $(this).toggleClass("bg2"); $(this).next().slideToggle(); }); }); </script> </head> <body> <dt class="bg1">ああああああああああああああああああああああああああああ</dt> <dd>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd> <dt class="bg1">うううううううううううううううううううううううううう</dt> <dd>えええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええ</dd> <dt class="bg1">おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</dt> <dd>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</dd> </body> </html>
- 締切済み
- JavaScript
- jQueryにてアコーディオン機能実装について
皆様、いつもお世話になります。 現在jQueryを使ったアコーディオン機能の実装を勉強しています。 下記、サイトを参考に実装してみたのですが、要望どおりの挙動にならず困っています。 【参考サイト】 http://web-pc.net/jquery010 【質問内容】 ページロード時に、全てのリストが開いてしまっている。 要望する挙動は以下ページのとおり、ページロード時は全てのリストが閉まっている状態にしたい。 http://sample.web-pc.net/accordion/# ソースは以下のとおりです。 【javascript】 <!-- jQuery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function(){ $(".schedule_list dt").click(function(){ $(this).next("dd").slideToggle(); $(this).children("div").toggleClass("open"); }); }); </script> 【HTML】 <div> <dl class="schedule_list"> <dt> <div> <span> <span>★</span> <span>▲▲</span> <span>画像</span> </span> </div> </dt> <dd> <div> <table> <tr> <td> <img src="▲"> </td> <td> <div> <a href=""><img src="▲" /></a> </div> </td> </tr> </table> </div> </dd> </dl> </div> 【CSS】 dl.schedule_list { display:block; } dl.schedule_list dt div { width:546px; height:61px; display:block; background-image:url(★);} dl.schedule_list dt div.open { width:546px; height:61px; display:block; background-image:url(★);} 以上です。 どなたかお詳しい方ご教授のほどよろしくお願いいたします。 開発環境： MacOSX yosemite Dreamweaver CC Safari8.0
- ベストアンサー
- JavaScript
- JQueryで$("dt span")クリック動作
JQueryで$("dt span")をクリックしたときに 隣接するddタグの部分を表示させるには以下の記述を どのように修正すればよいのでしょうか？ <html> <head> <style type="text/css"> dl { margin-bottom: 20px; } dd { display: none; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("dt span").click(function(){ $("+dd",this).slideToggle(); }); }); </script> </head> <body> <dl> <dt>toggle<span>開く</span></dt> <dd>テキストが入ります。</dd> </dl> <dl> <dt>toggle<span>開く</span></dt> <dd>テキストが入ります。</dd> </dl> </body> </html> ご存じの方がおられましたらご回答をよろしくお願いします。
- ベストアンサー
- JavaScript
- アコーディオンメニューの開閉制御
私webデザイナーをしています。 アコーディオンメニューで（開くのは１つのパネルのみ）ページ遷移してもアコーディオンの開いている部分が閉じないものを作りたいと思っています。 しかし、下記のコードでどうしても実装できません。 技術のある方、間違いを教えていただけないでしょうか？ 【ｈｔｍｌ】 <dl class="accordion_dl"> <dt>アコーディオンメニュー.1</dt> <dd>アコーディオンメニュー.1のテキスト表示</dd> <dt>アコーディオンメニュー.2</dt> <dd>アコーディオンメニュー.2のテキスト表示</dd> <dt>アコーディオンメニュー.3</dt> <dd>アコーディオンメニュー.3のテキスト表示</dd> <dt>アコーディオンメニュー.4</dt> <dd> <ul> <li>リスト挿入</li> <li>リスト挿入</li> <li>リスト挿入</li> <li>リスト挿入</li> </ul> </dd> </dl> 【JS】 jQueryとjquery.cookie.jsを読み込んでいます。 for (var i=0; i < $(".accordion_dl dt").length; i++) { if( $.cookie("accord" + i) == "open" ) { $(".accordion_dl dt").eq(i).next("dd").show(); } } $('.accordion_dl dt').click(function(){ $(this).toggleClass("open"); $(this).siblings("dt").removeClass("open"); $(this).next("dd").slideToggle(); $(this).next("dd").siblings("dd").slideUp(); n = $(".accordion_dl dt").index(this); if ($.cookie("accord" + n) == "open") { $.cookie("accord"+n,"close", {path:"/"}); } else { $.cookie("accord"+n,"open", {path:"/"}); } }); よろしくお願いいたします。
- 締切済み
- JavaScript
- スマホ表示でのjQueryの挙動がおかしい
jQueryで該当箇所をクリックすると、CSSで非表示にしていた部分を開く動作を実装したいのですがうまくいきません。 ちなみにWordPressで制作をしております。 スマホでタップすると閉じていた箇所が開くところまではいいのですが、勝手に閉じてしまいます。 PC表示では勝手に閉じる動作はありません。 解決策を教えていただけますと大変助かります。 どうぞよろしくお願いします。 ■固定ページ編集画面内の本文エリアに、下記コードを入力しました。 <script> $(function(){ $(“#list dt").on("click", function() { $(this).next().slideToggle(); }); }); </script> <div id="list”> <dl> <dt>あああああ</dt> <dd>いいいいい。</dd> </dl> ※WordPressのjQueryはv1.11.0です。
- ベストアンサー
- JavaScript
- jqueryによるアコーディオン表示
http://liginc.co.jp/web/js/jquery/34048 上記サイトを参照してjqueryによるアコーディオン表示をやってみました。 上記サイトのデモではアコーディオンメニューをクリックするとその下に 「アコーディオンメニューが開く」という文字列が表示されます。 しかし、私の環境ではその文字列がアコーディオンメニューより右にずれて表示(下記表示イメージ) されてしまいます。 【表示イメージ】 アコーディオンメニュー１ アコーディオンメニュー アコーディオンメニュー２ アコーディオンメニュー アコーディオンメニュー３ アコーディオンメニュー 下記が実際に書いたHTMLなのですがCSSをどのように修正すればデモのように アコーディオンメニューが表示されますでしょうか。 また、下記サンプルではアコーディオンメニュー１が開いたときに表示する文字列を 改行しているのですが<BR>タグで開業すると１行目と２行目の間が大きく開いてしまいます。 line-height を調整すれば行間の隙間が調整できるのですが１行目の位置まで変更 されてしまいます。１行目の位置はそのままに、行間の隙間を調整することはできますでしょうか。 【HTML】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#acMenu dt").click(function() { $(this).next().slideToggle(); $(this).toggleClass("active"); }); }); </script> <title>CSS</title> <style type="text/css"> #acMenu dt{ display:block; width:250px; height:50px; line-height:50px; text-align:center; border:#666 1px solid; cursor:pointer; background:url(../images/i_swich.png) 220px -69px no-repeat; padding-right:15px; } #acMenu dd{ background:#f2f2f2; width:250px; height:150px; line-height:50px; text-align:center; border:#666 1px solid; display:none; } #acMenu dt.active{ background:url(../images/i_swich.png) 220px 18px no-repeat; } </style> </head> <body> <dl id="acMenu"> <dt>アコーディオンメニュー1</dt> <dd>アコーディオンメニュー1が開く。<BR>改行した。</dd> <dt>アコーディオンメニュー2</dt> <dd>アコーディオンメニュー2が開く。</dd> <dt>アコーディオンメニュー3</dt> <dd>アコーディオンメニュー3が開く。</dd> </dl> </body> </html>
- ベストアンサー
- CSS
- ｊQuery
http://ascii.jp/elem/000/000/498/498710/ 上記サイトの6page目をみて、サイトに手順のあるｊQuerｙアコーディオンを作成しようとおもったのですが、クリックすると２番目と3番目のｄｄの部分が表示されるのですが、私のは最初からｄｄの画像が 3枚とも表示されています。 私の作成したサイトのｈｔｍｌ、ｃｓｓの記述は以下です。 また、ｊｓフォルダにはjquery.animate-colors-min と jquery.easying.1.3と jquery.skitterと jquery-1.6.3.minが入っていて、jqueryskitterをダウンロードしたときのものです。それが間違いでしょうか？ 上記サイトでは他のバージョンを使っているので、それをダウンロードしないとダメなのでしょうか？ <script>の記述が間違っているのでしょうか？ 何卒ご教授お願い致します。 ○ｈｔｍｌ部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>メニューページ</title> <link href="all.css" rel="stylesheet" type="text/css" media="all" /> <script type="test/javascript" src="js/jquery-1.6.3.min.js"></script> $(function(){ $("dd:not(:first)").css("display","none"); $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); } }); }); </head> <body> <dl> <dt>course</dt> <dd> <p><img src="image/menu1_03.jpg" width="728" height="515" /></p> </dd> <dt>a la calt</dt> <dd> <p><img src="image/menu2_03.jpg" width="763" height="560" /></p> </dd> <dt>waine</dt> <dd> <p><img src="image/manu3_03.jpg" width="763" height="561" /></p> </dd> </dl> </body> </html> ○CSS部分*他のhtmlページともリンクしているため、下記以外にも書いてあります *{ margin:0; padding:0; } a imag{ border:none; } dl{ width:763px; margin:50px auto; } dl dt{ background:#7CADB6; border-bottom:1px solid #FFFFFF; cursor:pointer; } dl dd{ border:1px solid #7CADB6; border-top:none; height:561px; }
- ベストアンサー
- JavaScript
- jQuery読み込めない
アコーディオンメニューを導入しようと思い、こちらのサイトの https://b-risk.jp/blog/2021/11/accordion/#1 1つ開くと他の項目が閉じるアコーディオンのコードをコピペしましたが、表示はされますが動きません。 コードはコピペしただけなので、まったく変更していません。 たぶん、jQueryを読み込んでいないのだと思います。 Chromeのデベロッパーツールを開きConsoleタブが開いたら Failed to load resource: the server responded with a status of 404 (Not Found) Failed to load resource: the server responded with a status of 400 (Bad Request) というメッセージが出ます。 jQuery自体は</head>の上に <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script> と記載し動作は確認済みです。 アコーディオンメニューのjQueryコードは</body>の上に記載しています。 コードは次のとおりです。 ■HTML <div class="qa"> <div class="q">Q1.○○？</div> <div class="a">A1.✕✕！</div> </div> <div class="qa"> <div class="q">Q2.○○？</div> <div class="a">A2.✕✕！</div> </div> <div class="qa"> <div class="q">Q3.○○？</div> <div class="a">A3.✕✕！</div> </div> <div class="qa"> <div class="q">Q4.○○？</div> <div class="a">A4.✕✕！</div> </div> <div class="qa"> <div class="q">Q5.○○？</div> <div class="a">A5.✕✕！</div> </div> ■CSS .qa { font-size: 20px; .q { background-color: mediumseagreen; height: 60px; padding: 15px 40px 15px 15px; position: relative; cursor: pointer; &:before { position: absolute; content: ""; display: block; width: 10px; height: 2px; background-color: #fff; right: 15px; top: 50%; transform: translate(0, -50%); } &:after { position: absolute; content: ""; display: block; width: 10px; height: 2px; background-color: #fff; right: 15px; top: 50%; transform: translate(0, -50%) rotate(90deg); } } .q.active { &:after { display: none; } } .a { background-color: greenyellow; height: 60px; display: none; padding: 15px; } } ■jQuery $('.q').click(function(){ $(this).siblings('.a').stop().slideToggle(); $('.q').not($(this)).siblings('.a').slideUp(); $(this).toggleClass('active'); $('.q').not($(this)).removeClass('active'); }); 以上、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jauery ui dialog 読み込んだ外部htmlファイル内での
jauery ui dialog 読み込んだ外部htmlファイル内でのjqueryの実行 お世話になります。 iwatuturuturu と申します。 jqueryで読み込んだ外部htmlファイル内でのjqueryのセレクターを使用した装飾等ができません。 ［index.html］にてjqueryのloadを使用し、同じ階層内の［text.html］のファイルを読み、それをjQuery uiを使用したdialogで表示させています。 読み込まれたdialog内の要素に装飾を行ないたいと考えておりますが、下記のソースにあります［$("p").css("background-color", "red");］が読み込まれたタイミングで、［$("p")］が読み込まれていない為か背景色の変更が行えません。（jqueryを使用し、テーブルの行を一行毎に色付けをしたりしたいのでこのような質問にしました。） loadなどで外部ファイルを読み込んで、読み込まれた要素にjqueryによる装飾や操作を行いたい場合はどのようなやり方があるのでしょうか？ 【ソース［index.html］】－－－－－－－－－－－－－－－－－－－－－－－－ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" href="../css/common/jquery-ui-1.8.4.custom.css" rel="stylesheet" /> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript" src="../js/jquery-ui.js"></script> <script type="text/javascript"> $(function(){ $("button").click(function(){ /* dialogを読み込む領域を作成 */ $("body").append("<div id='dialog_window'></div>"); /* loadで外部htmlファイルの読み込み */ $("div#dialog_window").load("text.html"); /* loadで読み込まれたhtmlファイルをdialogとして表示 */ $("div#dialog_window").dialog({ autoOpen: true, width: 1100, }); /* dialog内の装飾 */ $("p").css("background-color", "red"); }); }); </script> </head> <body> <button>ウィンドウopen</button> </div> </body> </html> 【ソース［text.html］】－－－－－－－－－－－－－－－－－－－－－－－－ <p>読み込み完了</p> －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ よろしくお願いいたします。
- ベストアンサー
- JavaScript
お礼
mtaka2さん ご回答ありがとうございます。 教えて頂きましたやり方で、正常に動きました！ 本当にありがとうございます！