Issues with jQuery in WordPress. jQuery load but don't work

Question

First of all, I apologize if my english is not completely clear. I will try to be brief and precise.

As I said in the title, jQuery file is loaded but it doesn't work, I mean, it appears in the head (i've already tried putting it in the footer) but the $ function isn't recognized. I was investigating about the issue in this comunity and in many others for a few days but I haven't success.

My functions.php header:

<?php
//Load jQuery
function loadjQuery() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', get_template_directory_uri().'/js/jquery.min.js', array(), null);
    wp_enqueue_script('jquery');
}

//Load js
function add_js(){
    wp_register_script('jquery-migrate', get_template_directory_uri().'/js/jquery-migrate.min.js', array("jquery"), null);
    wp_enqueue_script('jquery-migrate');
    wp_register_script('jquery-waypoints', get_template_directory_uri().'/js/jquery.waypoints.min.js', array("jquery"));
    wp_enqueue_script('jquery-waypoints');  
    wp_register_script('jquery-counterup', get_template_directory_uri().'/js/jquery.counterup.min.js', array("jquery"));
    wp_enqueue_script('jquery-counterup');
    wp_register_script('bootstrap', get_template_directory_uri().'/js/bootstrap/js/bootstrap.min.js', array('jquery'));
    wp_enqueue_script('bootstrap');
    wp_register_script('popper', get_template_directory_uri()."/js/popper.min.js"
, array('jquery'));
    wp_enqueue_script('popper');
    wp_register_script('easing', get_template_directory_uri()."/js/easing.min.js", array('jquery'));
    wp_enqueue_script('easing');    
    wp_register_script('typed', get_template_directory_uri().'/js/typed/typed.min.js', array('jquery'));
    wp_enqueue_script('typed');
    wp_register_script('main', get_template_directory_uri().'/js/main.js', array('jquery'), null);
    wp_enqueue_script('main');

}
add_action("wp_enqueue_scripts", "load_stylesheets");
add_action('wp_enqueue_scripts', 'loadjQuery',999);
add_action("wp_enqueue_scripts", "add_js", 999);
add_action('phpmailer_init','send_smtp_email');
?>

My main.js file:

jQuery(function($) {

    $('#preloader').addClass('preloader');
    $(window).on("load", function() {
        $(document).ready(function(){   
            $('.preloader').removeClass('preloader');
        });
    });
    $(document).ready(function() {
        "use strict";
        var nav = $('nav');
        var navHeight = nav.outerHeight();
            $('.navbar-toggler').on('click', function() {
            if( ! $('#mainNav').hasClass('navbar-reduce')) {
            $('#mainNav').addClass('navbar-reduce');
            }
        })


    // Back to top button
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
        $('.back-to-top').fadeIn('slow');
        } else {
        $('.back-to-top').fadeOut('slow');
        }
    });
    $('.back-to-top').click(function(){
        $('html, body').animate({scrollTop : 0},1500, 'easeInOutExpo');
        return false;
    });

    /*--/ Star ScrollTop /--*/
    $('.scrolltop-mf').on("click", function () {
        $('html, body').animate({
            scrollTop: 0
        }, 1000);
    });


        /*--/ Star Scrolling nav /--*/
        $('a.js-scroll[href*="#"]:not([href="#"])').on("click", function () {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html, body').animate({
                        scrollTop: (target.offset().top - navHeight + 5)
                    }, 1000, "easeInOutExpo");
                    return false;
                }
            }
        });

        // Closes responsive menu when a scroll trigger link is clicked
        $('.js-scroll').on("click", function () {
            $('.navbar-collapse').collapse('hide');
        });

        // Activate scrollspy to add active class to navbar items on scroll
        $('body').scrollspy({
            target: '#mainNav',
            offset: navHeight
        });
        /*--/ End Scrolling nav /--*/

        /*--/ Navbar Menu Reduce /--*/
        $(window).trigger('scroll');
        $(window).on('scroll', function () {
            var pixels = 50; 
            var top = 1200;
            if ($(window).scrollTop() > pixels) {
                $('.navbar-expand-md').addClass('navbar-reduce');
                $('.navbar-expand-md').removeClass('navbar-trans');
            } else {
                $('.navbar-expand-md').addClass('navbar-trans');
                $('.navbar-expand-md').removeClass('navbar-reduce');
            }
            if ($(window).scrollTop() > top) {
                $('.scrolltop-mf').fadeIn(1000, "easeInOutExpo");
            } else {
                $('.scrolltop-mf').fadeOut(1000, "easeInOutExpo");
            }
        });

        /*--/ Star Typed /--*/
        if ($('.text-slider').length == 1) {
        var typed_strings = $('.text-slider-items').text();
            var typed = new Typed('.text-slider', {
                strings: typed_strings.split(','),
                typeSpeed: 80,
                loop: true,
                backDelay: 1100,
                backSpeed: 50
            });
        }

});
});

I also tried to change all the '$' element with jQuery and loading the cdn of jquery but it didn't work either.

Thanks in advance!

Uncaught TypeError: $(...).addClass(...) is not a function But if I replace the first function jQuery with '$' the error is: $ is not a function, reference error. So if i replace all the jquery elements with '$' it still dont working :( — Jean Louis
– Jean Louis, Commented Apr 21, 2020 at 17:21
Can you check whether the jQuery in actually enqueue or not? — Sagar Bahadur Tamang
– Sagar Bahadur Tamang, Commented Apr 21, 2020 at 17:31
How can I check that? At least in the dev console I don't see anything else but the Reference error — Jean Louis
– Jean Louis, Commented Apr 21, 2020 at 21:55

user1165759 · Accepted Answer · 2020-04-21 17:52:32Z

1

The correct way to use jQuery is within a self executing anonymous function as follows:

(function($) {

  $('#preloader').addClass('preloader');
  ...

})(jQuery);

answered Apr 21, 2020 at 17:52

user1165759

3333 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jean Louis Over a year ago

Yes I've tried that (my code is inside the anonymous function) but didn't work to

Jean Louis Over a year ago

Edit: I've circumscribe every event function in an anonymous function and it works fine! Thanks dude!

Collectives™ on Stack Overflow

Issues with jQuery in WordPress. jQuery load but don't work

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related