jQuery 未捕获的类型错误:$(...).ready 不是函数

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/33056230/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 16:56:04  来源:igfitidea点击:

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

jquery

提问by Nick M

Hi I Know this has been asked before but no answer on here seems to help me.

嗨,我知道以前有人问过这个问题,但这里没有答案似乎对我有帮助。

I have this block of JS:

我有这个 JS 块:

$(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 be getting this error but I have no idea why?

我似乎收到了这个错误,但我不知道为什么?

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

Thanks

谢谢

回答by Praveen Kumar Purushothaman

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

您正在使用Prototype.js以及jQuery.js. 如果您想使用 jQuery,最好将您的代码封装在一个 IIFE 中,如下所示:

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

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

因此,您的问题的解决方案是您更改$为 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 a IIFE:

或者,使用 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);