I'm using the wordpress theme 'Divi'. After updating, some custom jQuery I added into the footer template that has worked for the last several years has broken and I can't figure out how to get it working again.

This is what is in my footer template:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
(function($){
    jQuery('[id=beer_right]').each(function(){  
        var text = (jQuery(this).text());  
        console.log(text);
        var substring = text.substring(1,3);
        var substring100 = text.substring(1,4);
            if(substring100 == "100"){
            jQuery(this).addClass('full')
        }else if (substring >= 60 && substring <= 99){
                jQuery(this).addClass('full')
        }else if(substring >= 30 && substring <= 59){
            jQuery(this).addClass('half')
        }else{
            jQuery(this).addClass('empty')
        }
    });
    jQuery("[id=bottle_right]").each(function(){  
        var text2 = (jQuery(this).text());  
        var substring2 = text2.substring(2,4);
        //console.log(substring2);
            if(substring2 == "17" || substring2 == "16" || substring2 == "15" || substring2 == "14" || substring2 == "13" || substring2 == "12" || substring2 == "11" || substring2 == "10" || substring2 == "9%"){
                jQuery(this).addClass('strong')
        }else if(substring2 == "8%" || substring2 == "7%" || substring2 == "6%"){
            jQuery(this).addClass('average')
        }else{
            jQuery(this).addClass('light')
        }
    })
     if (jQuery('.app-link').length){
            if(navigator.userAgent.toLowerCase().indexOf("android") > -1){
            var applink = jQuery('.app-link');
            applink.attr("href", "https://play.google.com/store/apps/details?id=com.AuphanSoftware.OftenDining");
            }
            if(navigator.userAgent.toLowerCase().indexOf("iphone") > -1){
            var applink = jQuery('.app-link');
            applink.attr("href", "https://itunes.apple.com/us/app/often-dining/id608504639?mt=8")
             }
     }

})(jQuery); 
</script>




<script>
(function($){
    if (jQuery(window).width() < 585) {
        jQuery('.et_pb_tabs_controls > li').click(function() {
            jQuery('html, body').animate({
                    scrollTop: jQuery(".et_pb_all_tabs").offset().top
                }, 2000);
        });
        }
})(jQuery);

</script>

The error I'm getting in the console for each of these is:

(index):5831 Uncaught TypeError: jQuery(...).each is not a function

(index):5877 Uncaught TypeError: jQuery(...).width is not a function

Website is: https://sdtaproom.com/beer

CodePudding user response：

Did you remove jquery from your wp? If not, you don't need to make this call > () before the function

The function is correct, and works in the console, the error is due to the loading lifecycle of the jquery being loaded.

sorry about my English

CodePudding user response：

Figured it out. I was using the plugin 'autoptimize' which was aggregating the JS. I turned this off and it's working now