Q&A
jsファイルの読み込み記述もあわせてhtml全体を提示していただいて良いですか？
１０年以上前のWEBサイトのトップページのみレスポンシブ対応をすることとなり、
アコーディオンメニューなどを実装するためjquery-2.2.4.jsを読み込ませたところ下記のようなエラーが出てしまい動作しません。
エラーの内容は、clickというプロパティは無いよといった感じかなとは思っているのですが、
解決法がわからず困っています。
お手数をおかけしますが、お力添えをよろしくお願いいたします。
以下のエラーは、アコーディオンメニューを実装するため、click時に〜〜という記述をした場合のエラーです。
clickなどの指定をせずただalert();などを指定すればアラートは動いていたのでファイルの読み込みが間違っているというわけでは無いと思います。
エラー内容（chromeの開発者ツールで確認したもの）
function.js:4 Uncaught TypeError: Cannot read property 'click' of null
at HTMLDocument.<anonymous> (function.js:4)
at fire (jquery-2.2.4.js:3187)
at Object.fireWith [as resolveWith] (jquery-2.2.4.js:3317)
at Function.ready (jquery-2.2.4.js:3536)
at HTMLDocument.completed (jquery-2.2.4.js:3552)
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 7 <meta name="format-detection" content="telephone=no"> 8 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 10 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 11 <link rel="stylesheet" type="text/css" href="css/base.css" /> 12 <link rel="stylesheet" type="text/css" href="css/common.css" /> 13 <link rel="stylesheet" type="text/css" href="css/top.css" /> 14 <link rel="stylesheet" type="text/css" href="dist/css/colorbox.css"> 15 <link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" /> 16 <link rel="icon" type="image/png" href="" sizes="16x16" /> 17 <script type="text/javascript" src="js/jquery-2.2.4.js"></script> 18 <script type="text/javascript" src="js/function.js"></script> 19 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 20 <script type="text/javascript" src="js/jquery.fancybox-1.3.4.js"></script> 21 <script type="text/javascript" src="js/jquery.easing-1.3.pack.js"></script> 22 <script type="text/javascript" src="js/jquery.bxSlider.min.top.js"></script> 23 <script type="text/javascript" src="dist/js/jquery.colorbox.js"></script> 24 <script type="text/javascript"> 25 jQuery.noConflict(); 26 var j$ = jQuery; 27 </script> 28 <!-- videobox --> 29 <script type="text/javascript" src="videobox/js/mootools.js"></script> 30 <script type="text/javascript" src="videobox/js/swfobject.js"></script> 31 <script type="text/javascript" src="videobox/js/videobox.js"></script> 32 <link rel="stylesheet" href="videobox/css/videobox.css" type="text/css" /> 33 <script type="text/javascript" src="js/switch.js"></script> 34 <script> 35 j$(document).ready(function(){ 36 //Examples of how to assign the Colorbox event to elements 37 j$(".group1").colorbox({rel:'group1'}); 38 j$(".group2").colorbox({rel:'group2', transition:"fade"}); 39 j$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"}); 40 j$(".group4").colorbox({rel:'group4', slideshow:true}); 41 j$(".ajax").colorbox(); 42 j$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390}); 43 j$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409}); 44 j$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"}); 45 j$(".inline").colorbox({inline:true, width:"50%"}); 46 j$(".callbacks").colorbox({ 47 onOpen:function(){ alert('onOpen: colorbox is about to open'); }, 48 onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, 49 onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, 50 onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, 51 onClosed:function(){ alert('onClosed: colorbox has completely closed'); } 52 }); 53 54 j$('.non-retina').colorbox({rel:'group5', transition:'none'}) 55 j$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true}); 56 57 //Example of preserving a JavaScript event for inline calls. 58 j$("#click").click(function(){ 59 j$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); 60 return false; 61 }); 62 }); 63 </script> 64 </head> 65 <body> 66 <div id="fb-root"></div> 67 <script>(function(d, s, id) { 68 var js, fjs = d.getElementsByTagName(s)[0]; 69 if (d.getElementById(id)) return; 70 js = d.createElement(s); js.id = id; 71 js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1"; 72 fjs.parentNode.insertBefore(js, fjs); 73 }(document, 'script', 'facebook-jssdk'));</script> 74 75 <div id="wrapper"> 76 <header> 77 <div class="header-in width1020" id="head_pc"> 78 <p class="head_sales"><img src="img/top/head_sales.png" width="625" height="80" alt="累計販売台数 2000台突破！" /></p> 79 <p class="head_contact"> 80 <a href="https://fc.canonet.ne.jp/www.toyotomi.jp/secure/pellet/contact.php"> 81 ペレットストーブ専用コール 0120-938-178 受付け時間：午前9時～午後5時（土曜・日曜・祝日は除く） 82 </a> 83 </p> 84 </div> 85 86 <div class="header-menu width1019"> 87 <a class="menu-trigger"> 88 <span></span> 89 <span></span> 90 <span></span> 91 </a> 92 </div> 93 <nav class="header-in width1019"> 94 <ul> 95 <li><a href="">TOP<span>トップ</span></a></li> 96 <li><a href="">BUSINESS<span>事業内容</span></a></li> 97 <li> 98 <span class="conditions">COMPANY<span>会社情報</span></span> 99 <ul> 100 <li><a href="#">あああ</a></li> 101 <li><a href="#">あああ</a></li> 102 <li><a href="#">あああ</a></li> 103 </ul> 104 </li> 105 </ul> 106 </nav> 107 </header>
javascript
1$(function(){ 2 3//▼アコーディオン 4 $(".conditions").on("click", function() { 5 if(!$(this).next().is(':animated')){ 6 $(this).next().slideToggle("300"); 7 $(this).toggleClass("conditions-close"); 8 } 9 }); 10 11});
回答4件
0
1つ考えられることとして、ブラウザが互換モードとなっている可能性があります。
- 冒頭のDOCTYPE宣言を
<!DOCTYPE html>として、ブラウザを標準モードに切り替えましょう。 - IEの場合、
X-UA-Compatibleという、古いIEのモードで表示する設定が入っていることがあるので、これを止めましょう。
なお、1.と2.のいずれとも、表示に影響する可能性がありますので、行うときは要注意です。
jQuery 2.2.4を入れた行より後に、Google経由でjQuery 1.6を読み込んでいる行があります。こちらに上書きされて、2.2.4のほうが見えなくなっているようです。
html
1<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
なお、他に読み込んでいるjQueryプラグインが2.2.4で動くかは要検証です。
投稿2018/07/13 04:46
編集2018/07/13 05:13
総合スコア145183
宣言部分などを追記いたしました！
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
この部分にご指摘のありましたX-UA-Compatibleが見受けられるので、一度とって見たほうが良いのでしょうか？
この記述自体は、問題なくjqueryが動いているサイトから持ってきたので関係無いのかな？とも思っています。
IE=Edgeなら、あっても問題はありません（最新版で動かす、という意味です）。
あと、実行しているブラウザは何でしょうか。
そうなんですね、ありがとうございます。
実行したブラウザはchromeです！
追記ありがとうございます。
jqueryを複数読み込んでしまっているということで、どちらかに絞ってみたのですが同じエラーが表示されてしまっていました。
そこで、<script type="text/javascript" src="js/function.js"></script>以下のscriptを一旦全部消してみたら正常に動くようになりました。
どのプラグインが影響しているのかはまだわかりませんが、一つ一つ見てみようと思います。
ありがとうございました！
0
自己解決
videoboxというプラグインのscriptが影響していたのか、下記の記述をコメントアウトしたら動きました。
<script type="text/javascript" src="videobox/js/mootools.js"></script>ちゃんとした解決にはなっていないかもしれませんが、
ひとまずjqueryが動作したのでこの質問は閉じさせていただきます。
みなさんご解答ありがとうございました！
投稿2018/07/13 05:54
総合スコア11
mootoolsはjQueryのような汎用ライブラリの1つで、互いに干渉します。共存の方法も無くはないので、必要であれば検索してみてください。
ご返信が遅くなり申し訳ございません。
共存できるか調べて色々試してみます。
ありがとうございます！
0
jQuery の動作ブラウザは IE だと 9 以上ですが、その辺は大丈夫ですか？
投稿2018/07/13 04:51
総合スコア13703
あなたの回答
tips
プレビュー
