Uncaught TypeError: $ (...). Ready is not a function

Question

Hi, I know this was asked before, but no answer here helps me.

I have this JS block:

$(document).ready(function() {
    $('.play-icon-hover').hover(function() {
         $('.cms-model-banner-overlay').addClass('.cms-model-banner-overlay-active');
        }, function() {
         $('.cms-model-banner-overlay').removeClass('.cms-model-banner-overlay-active');
    });
});

And I seem to get this error, but I have no idea why?

Uncaught TypeError: $(...).ready is not a function

thanks

Answer 1

You are using Prototype.jsas well jQuery.js. If you want to use jQuery, it is better to encapsulate your code inside IIFE as follows:

(function ($) {
  // jQuery code using $
})(jQuery);

So, the solution for your problem is to either change $to jQuery:

jQuery(document).ready(function() {
  jQuery('.play-icon-hover').hover(function() {
    jQuery('.cms-model-banner-overlay').addClass('.cms-model-banner-overlay-active');
  }, function() {
    jQuery('.cms-model-banner-overlay').removeClass('.cms-model-banner-overlay-active');
  });
});

Or, use IIFE:

(function ($) {
  $(document).ready(function() {
    $('.play-icon-hover').hover(function() {
      $('.cms-model-banner-overlay').addClass('.cms-model-banner-overlay-active');
    }, function() {
      $('.cms-model-banner-overlay').removeClass('.cms-model-banner-overlay-active');
    });
  });
})(jQuery);