jQuery работает в консоли, но не в файле

На чтение 3 мин Опубликовано 28.09.2024

Содержание

Вопрос или проблема
Ответ или решение
Возможные причины
Решения
Заключение

Вопрос или проблема

Вот код.

jQuery(document).ready(function() {
    jQuery( '#menu-item-927' ).on( 'ubermenuopen', function(){
      jQuery('.site-content').addClass('blur');
    });
});

Он работает, когда я использую его в консоли, но не работает, когда находится в JS файле.

Вот что я пробовал:

Подключил скрипт с зависимостью jQuery wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/custom.js', array( 'jquery' ), '1.0.0', false ); и custom.js действительно отображается в исходном коде.
Добавил jQuery(document).ready(function().

П.С.: ubermenuopen — это событие API от плагина UberMenu.

Я протестировал, и все работает нормально. Но вы можете использовать хук wp_footer и добавить ваш кастомный js. Проверьте код ниже. Код будет добавлен в файл functions.php активной темы.

function add_custom_scripts(){ ?>
<script type="text/javascript">
    (function($){
        $(document).ready(function() {
            $( '#menu-item-927' ).on( 'ubermenuopen', function(){
              $('.site-content').addClass('blur');
            });
        });
    })(jQuery);
</script>
<?php }
add_action( 'wp_footer', 'add_custom_scripts', 10, 1 );

Ответ или решение

Проблема, с которой вы столкнулись, может быть вызвана рядом факторов. Давайте рассмотрим вашу ситуацию более подробно и предложим несколько решений.

Возможные причины

Загрузка скриптов: Убедитесь, что ваш JavaScript файл действительно загружается после загрузки jQuery. Если ваш код выполняется до того, как jQuery будет загружен, он не сможет работать.
Асинхронное выполнение: Если ваш скрипт загружается асинхронно, это может привести к тому, что код выполняется до того, как DOM будет полностью загружен.
Передача событий: Если событие ubermenuopen не вызывается, это может быть связано с тем, что ваш JavaScript код не находит элемент с id menu-item-927 в момент выполнения.

Решения

Используйте wp_footer: Вы можете попробовать внедрить ваш JavaScript-код прямо перед закрывающим тегом </body>, используя хук wp_footer. Это гарантирует, что ваши скрипты будут загружены после jQuery и остальных элементов страницы. Вот пример кода, который можно добавить в ваш файл functions.php активной темы:
```
function add_custom_scripts() { ?>
   <script type="text/javascript">
       (function($) {
           $(document).ready(function() {
               $('#menu-item-927').on('ubermenuopen', function(){
                   $('.site-content').addClass('blur');
               });
           });
       })(jQuery);
   </script>
<?php }
add_action('wp_footer', 'add_custom_scripts', 10, 1);
```
Проверьте наличие элемента: Убедитесь, что элемент с id menu-item-927 действительно существует на странице в момент, когда выполняется ваш код. Например, можно дополнительно добавить проверку:
```
$(document).ready(function() {
   if ($('#menu-item-927').length) {
       $('#menu-item-927').on('ubermenuopen', function(){
           $('.site-content').addClass('blur');
       });
   } else {
       console.log("Элемент #menu-item-927 не найден!");
   }
});
```
Правильный порядок подключения скриптов: Убедитесь, что вы правильно указали зависимости при подключении скрипта. Если у вас есть другие плагины или темы, которые также используют jQuery, проверьте, нет ли конфликтов.
Консоль разработчика: Используйте консоль разработчика в браузере для диагностики. Проверьте наличие ошибок в консоли JavaScript, которые могут помочь выявить причину проблемы.

Заключение

Если после выполнения всех вышеуказанных шагов проблема не будет решена, вы можете попробовать временно отключить другие скрипты или плагины, чтобы выявить возможные конфликты. Убедитесь, что используете последнюю версию jQuery и UberMenu. Надеюсь, эти рекомендации помогут вам решить проблему.