jquery mouseenter Добавить класс не работает

Question

Попытка заставить этот скрипт работать с WordPress и не работает. В консоли Chrome 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'); внутри функции mouseenter что происходит?

Я бы сделал то же самое с функцией mouseleave. пример: console.log("mouseleave"); http://codepen.io/dillonlara115/pen/KgQAEq (убедитесь, что ваш браузер Dev инструменты открыты для просмотра консоли)

Если консоль регулирует, как вы наведите курсор мыши на них, то вы знаете, что JS работает. Если это не так, то это что-то еще.

Вообще говоря, вы разместите свой пользовательский код js в нижнем колонтитуле, поэтому в случае, если что-то сломано в js, это не помешает загрузке остальной страницы. С учетом сказанного вы можете попробовать разместить пользовательские js в нижнем колонтитуле и посмотреть, работает ли это.

Answer 2

Был плагин WordPress, вызвавший конфликт, я отключил его, и он начал работать.

Плагин: Rev Slider - одна из самых старых версий.