jquery mouseenter add class not working

Question

このスクリプトをWordPressで動作させようとしていて、動作していません。 Chromeの開発コンソールにエラーは表示されません。何が問題なのでしょうか？ここで

はhtmlです：

<script type='text/javascript' src='https://gravitywiz.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script> 

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
    $('.bm-header__nav-menu-item.has-submenu').on({ 
     mouseenter: function() { 
      var submenu = $(this).find('.bm-header__nav-submenu'); 
      submenu.show(0).removeClass('nav-submenu-hide').addClass('nav-submenu-show'); 
     }, 
     mouseleave: function() { 
      var submenu = $(this).find('.bm-header__nav-submenu'); 
      submenu.removeClass('nav-submenu-show').addClass('nav-submenu-hide').delay(300).hide(0); 
     } 
    }); 

    $('.nav-submenu-langs .bm-header__nav-submenu-item').on('click', function(){ 
     $('.nav-submenu-langs .bm-header__nav-submenu-item').removeClass('lang-item-active'); 
     $(this).addClass('lang-item-active'); 
    }); 
}); 
</script> 

    <header class="bm-header transparent_nav"> 
     <div class="bm-header__wrp inner960 cf"> 

      <div class="bm-header__logo"> 
       <a href="#" class="bm-header__logo-img"></a> 
      </div> 

      <nav class="bm-header__nav"> 
       <ul class="bm-header__nav-menu"> 
                                               <li class="bm-header__nav-menu-item has-submenu "> 
                      <a href="#" class="bm-header__nav-menu-item-l ">#</a> 
                               <ul class="bm-header__nav-submenu nav-submenu-products "> 
                                       <li class="bm-header__nav-submenu-item"> 
                              <a href="#" class="bm-header__nav-submenu-item-l product-item-brick"><span>#</span><br/># </a> 
                             </li> 
                                                                          <li class="bm-header__nav-submenu-item"> 
                              <a href="#" class="bm-header__nav-submenu-item-l product-item-pwlocal"><span>#</span><br/> #</a> 
                             </li> 
                                                                          <li class="bm-header__nav-submenu-item"> 
                              <a href="#" class="bm-header__nav-submenu-item-l product-item-spiderpipe"><span>#</a> 
                             </li> 
                                                                                  </ul> 
                     </li> 
                                                        <li class="bm-header__nav-menu-item "> 
                      <a href="#" class="bm-header__nav-menu-item-l ">#</a> 
                              </li> 
                                                        <li class="bm-header__nav-menu-item "> 
                      <a href="#" class="bm-header__nav-menu-item-l ">#</a> 
                              </li> 
                                                                                 <li class="bm-header__nav-menu-item "> 
                      <a href="#" class="bm-header__nav-menu-item-l ">#</a> 
                              </li> 
           <li class="bm-header__nav-menu-item has-submenu "> 
                      <a href="#" class="bm-header__nav-menu-item-l ">#</a> 
                               <ul class="bm-header__nav-submenu "> 
                                       <li class="bm-header__nav-submenu-item"> 
                              <a href="#" class="bm-header__nav-submenu-item-l">#</a> 
                             </li> 
                                                   <li class="bm-header__nav-submenu-item"> 
                              <a href="#" class="bm-header__nav-submenu-item-l">#</a> 
                             </li> 
                                                   <li class="bm-header__nav-submenu-item"> 
                              <a href="#" class="bm-header__nav-submenu-item-l">#</a> 
                             </li> 
                                                   <li class="bm-header__nav-submenu-item"> 
                              <a href="#" class="bm-header__nav-submenu-item-l">#</a> 
                             </li> 
                                                   <li class="bm-header__nav-submenu-item"> 
                              <a href="#" class="bm-header__nav-submenu-item-l">#</a> 
                             </li> 
                                                   <li class="bm-header__nav-submenu-item"> 
                              <a href="#" target="_blank" class="bm-header__nav-submenu-item-l">#</a> 
                             </li> 
                                    </ul> 
                     </li> 

        <div class="bm-header__nav-account-area"> 
                <li class="bm-header__nav-menu-item menu-item-demo"><a href="#" class="bm-header__nav-menu-item-l">#</a></li> 
          <li class="bm-header__nav-menu-item menu-item-memb"><a href="#" class="bm-header__nav-menu-item-l">#</a></li> 

         <li class="bm-header__nav-menu-item has-submenu menu-item-lang-switcher"> 
          <div class="menu-item-current-lang lang-item-us">US</div> 
          <ul class="bm-header__nav-submenu nav-submenu-langs"> 
                             <li class="bm-header__nav-submenu-item lang-item-us "><a href="#" class="bm-header__nav-submenu-item-l">English</a></li> 

                           </ul> 
         </li> 
        </div> 
       </ul> 
      </nav> 
     </div> 
</header> 

私も正常に動作している同じメニューと同様のスクリプトを使用しています。 数時間インターネットを閲覧していたので、ここでこの質問をしなければなりませんでした。助けてください！

これは私の現在のhtmlで正常に動作しているコードです：

<script type="text/javascript"> 
jQuery(document).ready(function($){ 

$('.home_device').animate({marginLeft: '0'}, 600); 
    $('.bm-header').addClass('transparent_nav'); 
    $(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 
    if (scroll >=150) { 
     $(".bm-header").removeClass("transparent_nav"); 
    } else { 
     $(".bm-header").addClass("transparent_nav"); 
    } 
    }); 

}); 
</script> 

Answer 1

は、あなたがそれを適切にJSを実行していることを確認したことがありますか？ console.log（ 'mousenter'）を配置すると、マウスセンターの内部で何が起こるのですか？

私はmouseleave関数で同じことをします。 例：console.log("mouseleave"); http://codepen.io/dillonlara115/pen/KgQAEq （ブラウザの開発ツールは、コンソールを見ることが開いていることを確認してください）

あなたはこれらの上にカーソルを置くと、あなたのコンソールに調整した場合は、JSが実行されている知っています。そのことをしていない場合は、その別のもの。

一般的に言えば、カスタムjsコードをフッターに配置すると、jsで何かが壊れた場合でも残りのページが正しく読み込まれることはありません。それが言われると、カスタムjsをフッターに配置し、それが動作するかどうかを確認することができます。

Answer 2

WordPressプラグインが競合していたため、無効にして動作を開始しました。

プラグイン：Rev Slider最も古いバージョンの1つ。