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

If you’re getting the error ‘Uncaught TypeError: $(…).ready is not a function’ – but have no idea why, please read this short article with a samples of code.

So if you want to use jQuery in your project, it is better to encapsulate your code inside an IIFE like this:

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

So the solution for the issue is either you change $ to jQuery, for example:

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 a 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);
Back to Articles List

Let’s Work Together

TELL US MORE ABOUT YOUR PROJECT

Every day, we strive to assist a websites of our clients in augmenting their brand’s online visibility, improving the work any parts of web resources, increasing reach & engagement with a target audience and eventually drive sales.

LET’S CONNECT