分享一个与jquery相关的typeerror:$isnotafunction问题解决过程

江成军 江成军     2022-12-26     683

关键词:

最近碰到一个比较奇葩的问题,估计很多人也遇到过,就是jQuery可能会遇到的‘$ is not a function’,不过我碰到的这个问题比较怪异,解决该问题也颇费了一番周折,现在给大家分享一下。

运行环境描述

我是通过requireJS进行js及css的模块化加载,传统的加载js没问题,就是在通过requireJS加载jQuery时,碰到了问题。
给大家看看我的requireJS的配置js,见下图:

 

 

 以上是模块化加载js的部分,然后咱们再看看页面中模块化加载jQery的部分,见下图:

 

 

 运行工程,报下面的错误:

 

 

 

查找问题的曲折过程

本以为这就是一个相当小的问题,但没想到头发都快揪下来了,把找问题试过的方法简洁记录如下,记录得很简洁,但过程实在不轻松。

  1. jQuery加载顺序造成的,jQuery一定要是首先加载,检查代码,加载顺序正常,解决失败
  2. CDN加载jQuery有问题,通过直接访问CDN中配置的URL,一切正常,解决失败
  3. 怀疑jQuery的版本和requireJS版本不一致,这个可就难为我了,各种试都不行,最后采用之前工程中成功的项目版本,还是不行,解决失败
  4. 到现在为止,已经弄得有点精疲力尽了,各种试验、各种失败,真是备受打击,本来觉得几分钟就能解决的问题的,没想到一弄就是几个小时,最后也试过吧‘$’替换为‘jquery’,还是不行,一看时间已经到凌晨了。
    NND,真是活见鬼了,洗洗睡吧(睡也睡不着,鼓眼还在想问题在哪,鼓着鼓着就睡死过去了)。

峰回路转,解决问题,但是毫无成就感

第二天醒过来就开始弄,比较现在的配置和以前配置的差别,发现了一个问题,见下图:

 

 

 马上看找找查找了一下jQuery的源码,见下图:

 

 

从上面看,‘jQuery’还真是关键字!
现在,把‘jQuery’替换成‘jquery’,再试试看还有问题没有,一试,哇哈哈,问题解决啦啦啦啦啦。。。
这就是以上碰到问题的解决过程,其实就是requireJS在模块化加载jQuery时,取得别名‘jQuery’好死不死的正好碰到源码中的关键字,从而引发TypeError: $ is not a function的问题。

这说什么好呢,唉。。。

WEB项目开发中碰到的问题千奇百怪,大家想了解对如何快速的掌握Spring Boot,可以参见视频

51CTO:Spring Boot+Bootstrap开发小而完整web项目 
腾讯课堂:Spring Boot+Bootstrap开发小而完整web项目
CSDN学院:Spring Boot+Bootstrap开发小而完整web项目
网易云课堂:Spring Boot+Bootstrap开发小而完整web项目

 

 

TypeError:float() 参数必须是字符串或数字,而不是与散点图相关的“datetime.time”

】TypeError:float()参数必须是字符串或数字,而不是与散点图相关的“datetime.time”【英文标题】:TypeError:float()argumentmustbeastringoranumber,not\'datetime.time\'inrelationwithascatterplot【发布时间】:2021-10-2923:27:57【问题描述】:我创建了以下... 查看详情

TypeError:x 不是 Node.js 中的函数

】TypeError:x不是Node.js中的函数【英文标题】:TypeError:xisnotafunctioninNode.js【发布时间】:2018-11-2613:37:24【问题描述】:我正在开发一个Electron应用程序,我的目标是“拆分”index.js(主进程)文件。目前,我已将与菜单栏相关和... 查看详情

Webpack - TypeError:$ 不是函数

】Webpack-TypeError:$不是函数【英文标题】:Webpack-TypeError:$isnotafunction【发布时间】:2020-07-0602:43:31【问题描述】:我是webpack的新手,我正在使用webpack创建一个反应应用程序。我在编译TypeError:$isnotafunction时遇到此错误。我没有使... 查看详情

内容分享功能

第五章内容分享功能在上一章我们使用内置验证框架迅速的建立了整个网站的用户相关功能,还学习了如何通过一对一字段扩展用户信息,以及为网站添加第三方认证登录功能。这一章会学习使用JavaScript小书签程序,... 查看详情

内容分享功能

第五章内容分享功能在上一章我们使用内置验证框架迅速的建立了整个网站的用户相关功能,还学习了如何通过一对一字段扩展用户信息,以及为网站添加第三方认证登录功能。这一章会学习使用JavaScript小书签程序,... 查看详情

使用 jquery 插件时,TypeError $(...) 不是函数

】使用jquery插件时,TypeError$(...)不是函数【英文标题】:TypeError$(...)isnotafunctionwhenusingajqueryplugin【发布时间】:2013-07-1614:27:52【问题描述】:我为Jquery专家准备了一个。我下载了一个简单的jquery插件来从表格转换为CSV。这里是源... 查看详情

TypeError JavaScript 音频文件

】TypeErrorJavaScript音频文件【英文标题】:TypeErrorJavaScriptAudioFile【发布时间】:2018-12-2411:39:44【问题描述】:我已经构建了我的自定义音乐播放器,它使用我的一些自定义公式来计算曲目时长等。您可以看到NaN错误。抱歉,gif质... 查看详情

JCrop 与 React 使用自定义脚本加载 jquery 对象:TypeError:a 未定义

】JCrop与React使用自定义脚本加载jquery对象:TypeError:a未定义【英文标题】:JCropwithReactusingcustomscripttoloadthejqueryObject:TypeError:aisundefined【发布时间】:2017-07-1309:30:17【问题描述】:我已提出以下申请:https://github.com/pc-magas/reaqct-jc... 查看详情

分享两个与josn相关的androidstudio插件

在解析JSON数据时面比较杂乱,分享两个与JSON相关的插件以方便解析JSON数据。这两个插件都运行在AandroidStudio中。JsonParser这个插件是用来查看和转换JSON数据的,有三种查看方式,其中常用的是Pretty和Tree这两种方式。... 查看详情

Angular 2 从 Jquery 调用 Typescript 函数会导致未捕获的 TypeError

】Angular2从Jquery调用Typescript函数会导致未捕获的TypeError【英文标题】:Angular2callingaTypescriptfunctionfromJquerycausesuncaughtTypeError【发布时间】:2016-09-0414:19:31【问题描述】:我有一个带有输入文本字段的组件,我使用JQuery附加了一个... 查看详情

TypeError: key 必须是一个字符串,一个缓冲区或一个对象在 typeError 与 GCP 文件存在

】TypeError:key必须是一个字符串,一个缓冲区或一个对象在typeError与GCP文件存在【英文标题】:TypeError:keymustbeastring,abufferoranobjectattypeErrorwithGCPfileexists【发布时间】:2021-11-1707:53:46【问题描述】:我正在尝试简单地测试我们的Googl... 查看详情

测试相关知识分享(百度和其他途径查找到的)

A:1.一套完整的测试应该由哪些阶段组成?  参考答案:测试计划、测试设计与开发、测试实施、测试评审与测试结论  2.单元测试的主要内容?  参考答案:  模块接口测试、局部数据结构测试、路径测试、错误处理测... 查看详情

将 JQuery 与 node.js 一起使用时出错

...y");$().jquery;不幸的是,这不会与JQuery一起运行,给我一个TypeError:C:\\ 查看详情

TypeError: $(...).slider 不是函数

】TypeError:$(...).slider不是函数【英文标题】:TypeError:$(...).sliderisnotafunction【发布时间】:2014-11-2008:05:49【问题描述】:是否存在依赖于服务器的jquery滑块?我正在为jquery范围滑块使用jquery库和Ui。只有一个jquery库,所以我认为任... 查看详情

jQuery TypeError: $(...).val(...) 为空

】jQueryTypeError:$(...).val(...)为空【英文标题】:jQueryTypeError:$(...).val(...)isnull【发布时间】:2018-07-0401:48:03【问题描述】:我似乎无法找到我的代码中的缺陷。我将select2用于我的选择列表,并且右侧有一个按钮,单击该按钮时会执... 查看详情

使用 PrimeFaces 手动添加/加载 jQuery 会导致未捕获的 TypeErrors

】使用PrimeFaces手动添加/加载jQuery会导致未捕获的TypeErrors【英文标题】:Manuallyadding/loadingjQuerywithPrimeFacesresultsinUncaughtTypeErrors【发布时间】:2013-04-1611:20:07【问题描述】:我正在使用PrimeFaces3.5和JSF2.0。我想使用一个jQuery插件,... 查看详情

删除侦听器类不会停止与 Jquery Javascript 相关的声音事件

...上时播放声音(这已经可以正常工作了),并且希望包含一个按钮以在需要时将其关闭。不幸的是,我无法让它工作。我当前的代码如下:用于创造 查看详情

将元类与多重继承结合使用的 TypeErrors

】将元类与多重继承结合使用的TypeErrors【英文标题】:TypeErrorsusingmetaclassesinconjunctionwithmultipleinheritance【发布时间】:2011-01-1307:42:18【问题描述】:我有两个关于元类和多重继承的问题。第一个是:为什么我会得到类Derived的TypeE... 查看详情