質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • jQuery

    6674questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

古いサイトにjqueryを読み込んだところ、動作しません

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 200

se_ariga

score 7

10年以上前の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)

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>タイトル</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="format-detection" content="telephone=no">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/base.css" />
        <link rel="stylesheet" type="text/css" href="css/common.css" />
        <link rel="stylesheet" type="text/css" href="css/top.css" />
        <link rel="stylesheet" type="text/css" href="dist/css/colorbox.css">
        <link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" />
        <link rel="icon" type="image/png" href="" sizes="16x16" />
        <script type="text/javascript" src="js/jquery-2.2.4.js"></script>
        <script type="text/javascript" src="js/function.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.fancybox-1.3.4.js"></script>
        <script type="text/javascript" src="js/jquery.easing-1.3.pack.js"></script>
        <script type="text/javascript" src="js/jquery.bxSlider.min.top.js"></script>
        <script type="text/javascript" src="dist/js/jquery.colorbox.js"></script>
        <script type="text/javascript">
        jQuery.noConflict();
        var j$ = jQuery;
        </script>
        <!-- videobox -->
        <script type="text/javascript" src="videobox/js/mootools.js"></script>
        <script type="text/javascript" src="videobox/js/swfobject.js"></script>
        <script type="text/javascript" src="videobox/js/videobox.js"></script>
        <link rel="stylesheet" href="videobox/css/videobox.css" type="text/css" />
        <script type="text/javascript" src="js/switch.js"></script>
        <script>
            j$(document).ready(function(){
                //Examples of how to assign the Colorbox event to elements
                j$(".group1").colorbox({rel:'group1'});
                j$(".group2").colorbox({rel:'group2', transition:"fade"});
                j$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
                j$(".group4").colorbox({rel:'group4', slideshow:true});
                j$(".ajax").colorbox();
                j$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
                j$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
                j$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
                j$(".inline").colorbox({inline:true, width:"50%"});
                j$(".callbacks").colorbox({
                    onOpen:function(){ alert('onOpen: colorbox is about to open'); },
                    onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
                    onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
                    onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
                    onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
                });

                j$('.non-retina').colorbox({rel:'group5', transition:'none'})
                j$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});

                //Example of preserving a JavaScript event for inline calls.
                j$("#click").click(function(){
                    j$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <div id="fb-root"></div>
        <script>(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>

        <div id="wrapper">
            <header>
                <div class="header-in width1020" id="head_pc">
                    <p class="head_sales"><img src="img/top/head_sales.png" width="625" height="80" alt="累計販売台数 2000台突破!" /></p>
                    <p class="head_contact">
                        <a href="https://fc.canonet.ne.jp/www.toyotomi.jp/secure/pellet/contact.php">
                        ペレットストーブ専用コール 0120-938-178 受付け時間:午前9時~午後5時(土曜・日曜・祝日は除く)
                        </a>
                    </p>
                </div>

                <div class="header-menu width1019">
                    <a class="menu-trigger">
                        <span></span>
                        <span></span>
                        <span></span>
                    </a>
                </div>
                <nav class="header-in width1019">
                    <ul>
                        <li><a href="">TOP<span>トップ</span></a></li>
                        <li><a href="">BUSINESS<span>事業内容</span></a></li>
                        <li>
                            <span class="conditions">COMPANY<span>会社情報</span></span>
                            <ul>
                                <li><a href="#">あああ</a></li>
                                <li><a href="#">あああ</a></li>
                                <li><a href="#">あああ</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </header>
$(function(){

//▼アコーディオン
  $(".conditions").on("click", function() {
  if(!$(this).next().is(':animated')){
    $(this).next().slideToggle("300");
    $(this).toggleClass("conditions-close");
  }
  });

});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/07/13 13:46

    jsファイルの読み込み記述もあわせてhtml全体を提示していただいて良いですか?

    キャンセル

  • se_ariga

    2018/07/13 14:11

    お返事が遅くなりまして申し訳ございません、質問を編集いたしましたのでご確認をよろしくお願いいたします。

    キャンセル

回答 4

+2

1つ考えられることとして、ブラウザが互換モードとなっている可能性があります。

  1. 冒頭のDOCTYPE宣言を<!DOCTYPE html>として、ブラウザを標準モードに切り替えましょう。
  2. IEの場合、X-UA-Compatibleという、古いIEのモードで表示する設定が入っていることがあるので、これを止めましょう。

なお、1.と2.のいずれとも、表示に影響する可能性がありますので、行うときは要注意です。


jQuery 2.2.4を入れた行より後に、Google経由でjQuery 1.6を読み込んでいる行があります。こちらに上書きされて、2.2.4のほうが見えなくなっているようです。

<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 13:59

    宣言部分などを追記いたしました!
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    この部分にご指摘のありましたX-UA-Compatibleが見受けられるので、一度とって見たほうが良いのでしょうか?
    この記述自体は、問題なくjqueryが動いているサイトから持ってきたので関係無いのかな?とも思っています。

    キャンセル

  • 2018/07/13 14:00

    IE=Edgeなら、あっても問題はありません(最新版で動かす、という意味です)。

    あと、実行しているブラウザは何でしょうか。

    キャンセル

  • 2018/07/13 14:02

    そうなんですね、ありがとうございます。
    実行したブラウザはchromeです!

    キャンセル

  • 2018/07/13 14:28

    追記ありがとうございます。
    jqueryを複数読み込んでしまっているということで、どちらかに絞ってみたのですが同じエラーが表示されてしまっていました。
    そこで、<script type="text/javascript" src="js/function.js"></script>以下のscriptを一旦全部消してみたら正常に動くようになりました。
    どのプラグインが影響しているのかはまだわかりませんが、一つ一つ見てみようと思います。
    ありがとうございました!

    キャンセル

check解決した方法

0

videoboxというプラグインのscriptが影響していたのか、下記の記述をコメントアウトしたら動きました。
<script type="text/javascript" src="videobox/js/mootools.js"></script>

ちゃんとした解決にはなっていないかもしれませんが、
ひとまずjqueryが動作したのでこの質問は閉じさせていただきます。

みなさんご解答ありがとうございました!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/14 09:10

    mootoolsはjQueryのような汎用ライブラリの1つで、互いに干渉します。共存の方法も無くはないので、必要であれば検索してみてください。

    キャンセル

  • 2018/07/17 10:22

    ご返信が遅くなり申し訳ございません。
    共存できるか調べて色々試してみます。
    ありがとうございます!

    キャンセル

0

jQuery の動作ブラウザは IE だと 9 以上ですが、その辺は大丈夫ですか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/13 14:00

    chromeで確認しているので大丈夫だとは思います。。

    キャンセル

0

jQueryの2系を選ぶ理由はなにかありますか?
1.12などで試してみてはどうでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/13 14:03

    普段から使用しているのが2.2.4だったので同じく使用しておりました、一度バージョンを下げてみます。ありがとうございます!

    キャンセル

  • 2018/07/13 14:09

    1.12.4を使用してみましたが同じエラーが出てしまいました…

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • jQuery

    6674questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。