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插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
jquery插件实现悬浮的菜单
Apr 24 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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
PHP 批量更新网页内容实现代码
2010/01/05 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
详解webpack介绍&amp;安装&amp;常用命令
2017/06/29 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
Python入门篇之函数
2014/10/20 Python
python实现马耳可夫链算法实例分析
2015/05/20 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
详解python3中zipfile模块用法
2018/06/18 Python
Python中作用域的深入讲解
2018/12/10 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
Python实现自动装机功能案例分析
2020/10/22 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
白血病募捐倡议书
2014/05/14 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
邀请书模板
2015/02/02 职场文书
大学学生个人总结
2015/02/15 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers