I was previously having a jQuery conflict in my WordPress / WooCommerce set-up.

To fix this issue, I reverted back to the jQuery that is included in WordPress

// Remove themes old version of jQuery and load a compatible version
add_action('wp_enqueue_scripts', 'update_jquery_for_cherry_framework', 11);

function update_jquery_for_cherry_framework() {
   wp_deregister_script('jquery');
   wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', false, false, true);
   wp_enqueue_script('jquery');
}

When I made this change, all my jQuery functions started failing and chrome Console started outputting the error:

Uncaught TypeError: $ is not a function

To fix this issue, I had to encapsulate my functions like this

jQuery(document).ready(function($){
// script
});

This fixed the jQuery conflicts and they all started working again.
My Issue is I’m only able to figure out how to fix this issue with (document).ready instances.

One of my jQuery functions must trigger AFTER the document ready function, or in other words the window.onload function.

Here is the script in question:

<script>
$(window).load(function() {
  $(".parallax-slider").css({
    'margin-left': $(".parallax-bg").css("marginLeft")
  });
  $(".parallax-slider").fadeIn(2500 , function(){
    $(this).css("display","normal");
  });
  $(window).resize(function(){
    $(".parallax-slider").css({
    'margin-left': $(".parallax-bg").css("marginLeft")
    });
  });
});
</script>

Right now, as I stated previously, I’m getting the Uncaught TypeError: $ is not a function error on this for the line $(window).load(function() {

I’ve tried multiple things, such as changing it to jQuery(window).load(function($){

like this

jQuery(window).load(function($){
$(window).resize(function(){
    $(".parallax-slider").css({
'margin-left': $(".parallax-bg").css("marginLeft")
  });
 });
});  

but then I still get the error Uncaught TypeError: $ is not a function for $(window).resize(function(){

I’ve also tried other things like adding })(jQuery); at the end of my code.

As I’ve said everything is working fine for jQuery(document).ready(function($){‘s… how do I get my script to work in the instance when I need to use $(window).load(function() { or jQuery(window).load(function($){ or whatever it may be?

Read more here: jQuery on load function not Working with new version


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: