zoukankan      html  css  js  c++  java
  • bootsrap+jquery+组件项目引入文件的常见报错

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

    报错一:Uncaught ReferenceError: $ is not defined

    Uncaught ReferenceError: $ is not defined
    Uncaught ReferenceError: jQuery is not defined
    
    图片.png

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


    图片.png

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


    图片.png

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

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

    图片.png

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


    图片.png

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

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

    报错三: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)
    
    图片.png

    原因:包括两个不同版本的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
    
    图片.png

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

    原文作者:祈澈姑娘
    原文链接:https://www.jianshu.com/u/05f416aefbe1
    创作不易,转载请告知

    90后前端妹子,爱编程,爱运营,爱折腾。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
    有个很难涨粉的的公众号叫:【编程微刊】


  • 相关阅读:
    Add Two Numbers
    Reverse Linked List II
    Reverse Linked List
    Remove Duplicates from Sorted List
    Remove Duplicates from Sorted List II
    Partition List
    Intersection of Two Linked Lists
    4Sum
    3Sum
    2Sum
  • 原文地址:https://www.cnblogs.com/wangting888/p/9701766.html
Copyright © 2011-2022 走看看