bootstrap+jquery项目引入文件报错的解决方法


Posted in jQuery onJanuary 22, 2018

做一个项目的时候 ,控制台总是会出现各种bug,其实不用慌张,终结起来也就几种类型的错误,在开发中每次遇到错误都善于总结,下次在看到就会胸有成竹知道是什么情况了,以下是在开发过程中总结的一些错误以及错误的解决方法。

报错一:Uncaught ReferenceError: $ is not defined

Uncaught ReferenceError: $ is not defined
Uncaught ReferenceError: jQuery is not defined

bootstrap+jquery项目引入文件报错的解决方法 

错误原因:文件加载的顺序不对,jQuery文件的顺序要在前面

bootstrap+jquery项目引入文件报错的解决方法 

方法:把jQuery文件写在所有script文件前面

bootstrap+jquery项目引入文件报错的解决方法 

报错二:jsp页面相对路径和绝对路径的问题:

正常路径:html里面的../../,改成jsp页面就找不到路径了,这个时候成了这个鬼样子

bootstrap+jquery项目引入文件报错的解决方法 

这时候,只需要在文件里面加入这段代码:

bootstrap+jquery项目引入文件报错的解决方法 

解决办法:在<html>和<head>之间插入以下代码

<%
 String path = request.getRequestURI();
 String basePath = request.getScheme() + "://"
   + request.getServerName() + ":" + request.getServerPort()
   + path;
%>
<base href="<%=basePath%>" rel="external nofollow" >

报错三:Uncaught TypeError: $(...).tooltip is not a function

Uncaught TypeError: $(...).tooltip is not a function
 at HTMLDocument.<anonymous> (app.js:42)
 at l (jquery.min.js:4)
 at Object.fireWith [as resolveWith] (jquery.min.js:4)
 at Function.ready (jquery.min.js:4)
 at HTMLDocument.S (jquery.min.js:4)

bootstrap+jquery项目引入文件报错的解决方法 

原因:包括两个不同版本的jQuery UI。这可能会导致冲突。尝试删除

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

解决办法:

编辑:

<script>
jQuery( document ).ready(function( $ ) {
 $('.hasTooltip').tooltip();
});
</script>

像这样使用它,解决了我的问题!

报错四:Uncaught TypeError: $(...).sortable is not a function

Uncaught TypeError: $(...).sortable is not a function
 at HTMLDocument.<anonymous> (dashboard.js:12)
 at l (VM552 jquery.min.js:4)
 at Object.fireWith [as resolveWith] (VM552 jquery.min.js:4)
 at Function.ready (VM552 jquery.min.js:4)
 at HTMLDocument.S (VM552 jquery.min.js:4)

报错五:bootstrap.min.js:7 Uncaught Error: Bootstrap requires jQuery

bootstrap.min.js:7 Uncaught Error: Bootstrap requires jQuery
 at bootstrap.min.js:7

bootstrap+jquery项目引入文件报错的解决方法 

解决方案:解决方案:将jquery.min.js放在bootstrap.min.js文件之前引用,bootstrap.min.css文件在整两个文件前后引用都无妨(测试多次)。

总结

以上所述是小编给大家介绍的boostrap+jquery项目引入文件报错的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 #jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 #jQuery
基于jquery的on和click的区别详解
Jan 15 #jQuery
vue-cli webpack 引入jquery的方法
Jan 10 #jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 #jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 #jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 #jQuery
You might like
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
asp批量修改记录的代码
2008/06/25 Javascript
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
js实现拖拽效果
2015/02/12 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
浅谈js的异步执行
2016/10/18 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
Python抓取百度查询结果的方法
2015/07/08 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
Python实现登录接口的示例代码
2017/07/21 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
python中图像通道分离与合并实例
2020/01/17 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
会计毕业自我鉴定
2014/02/05 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
国际贸易求职信
2014/07/05 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
合伙购房协议样本
2014/10/06 职场文书
先进教师事迹材料
2014/12/16 职场文书
golang 语言中错误处理机制
2021/08/30 Golang
Java 数据结构七大排序使用分析
2022/04/02 Java/Android