wordpressのindex.phpにjQueryの一部が効かない

Question

閲覧ありがとうございます。
wordpressで作成したindex.phpで以下のjQueryが動きません。

同じwp内のsingle.php（投稿記事個別ページ）や、大元のindexでは正常に動作するのですが
ハンバーガーメニューを作るための以下のコードが効きません。

    $('#humberger_btn').click(function(){
      if($('#header').hasClass('open')){
        $('#header').removeClass('open');
      }else{
        $('#header').addClass('open');
      }
    });

上記コードの直後に書いた、以下のコードは問題なく動きます。

  $chPoint = 100;
  $targetH = $('body');
  $(window).on('scroll', function(){
    var scrollTop = $(window).scrollTop();
    if(scrollTop >= $chPoint){
      $targetH.addClass('scroll');
    }else{
      $targetH.removeClass('scroll');
    }
  });

サイトのフォルダ構成は以下の通りです。

index.php☆このページには効く
・/news
・・/wordpress
・・・/wp-contents
・・・・/themes
・・・・・/extheme
・・・・・・/index.php★このページに効かない
・・・・・・/single.php☆このページには効く
/assets
・/js
・・/common.js★このjsにハンバーガーメニューについて記載

私の知識だけでは正解にたどり着けなさそうなのでお力添えください。

Comments

[yukikp]

ChromeのDevToolsで、なにかJavaScriptエラーが出ていませんか？

[xminimx]

せっかくご指摘いただいたのですがごめんなさい、私のイージーミスでした！
また次にお知恵をお借りする機会があればよろしくお願いいたします。

Answer 1

maisumakunさんからいただいたアドバイスをきっかけにもう一度落ち着いてコードを見直してみたところ、
index.phpで読み込んでいるhead.phpの位置がおかしかったのでそこを直したら問題なく動作しました！
根本的なところが問題でした、ありがとうございました。精進します。

Answer 2

外側に$(function(){...});がない、ということはありませんか？

$(function(){...});に入れなかった場合、JavaScriptはその場で実行されますので、$('#humberger_btn')と書かれたJavaScriptを、このボタンより上で読み込んでいると、ボタンが見つからず処理がスルーされます。

Comments

[xminimx]

アドバイスありがとうございます。
前後にも他のコードを記述しており、それらをまとめてfunctionで囲っているのでそこは問題ないかと思います。また構成がほぼ同じである他のページは正常に動作するので別の問題なのかな…と考えています。
ただ「JavaScriptを、このボタンより上で読み込んでいると〜」という点が気になったので、自分でも見てみます。