模態框無法彈出的問題

問題起因：

昨晚寫到了一個模態框，用到了bootstrap和jquery，依賴的js已經復制到項目中，並在Jsp頁面上進行了引用，最初的引用如下：

<srcipt src="$${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></srcipt>
<link href="$${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet" />
<script src="$${pageContext.request.contextPath }/js/bootstrap.min.js"></script>

問題描述：

模態框無法正常彈出，使用瀏覽器查看資源看不到引用的Jquery，bootstrap也因沒有Js基礎而報錯。使用外部鏈接Jquery沒有問題，模態框正常彈出。

問題詳細：

運行tomcat之后在chrome測試發現模態框無法正常彈出，進行檢查發現錯誤如下：

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under the MIT license
 */
if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");
//省略。。。

報錯原因：Bootstrap 需要jQuery支持

檢查引用順序，jQuery確實在bootstrap之前，問題並不出在這里。。。

 

檢查文件資源以及源碼

使用${pageContext.request.contextPath }引用bootstrap正常而jQuery不正常

懷疑1：bootstrap與jQuery版本不符

但bootstrap3最低能夠兼容到jQuery1.9.X，將本地連接換成相同版本的web鏈接

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

模態框成功彈出，檢查chrome資源

 

 懷疑2：本地jQuery資源問題

更換了相同和不同版本的jQuery均無法加載。。

嘗試清理項目，重啟服務器也無效。。。

 

今天一早起來繼續修改，嘗試將引用改為

<% 
    String path=request.getContextPath() ;
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<link href="<%=basePath %>css/bootstrap.min.css" rel="stylesheet" />
<script src="<%=basePath %>js/jquery-3.3.1.min.js"></script>
<script src="<%=basePath %>js/bootstrap.min.js"></script>

運行檢查如下：

 

 模態框正常彈出，js加載正常，問題解決！

 

問題后續：

嘗試恢復昨晚的寫法，卻無論如何都沒有問題

檢查發現先jQuery正常加載，bootstrap依賴正常，如圖：

 

 ？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？

理解不能

 

如果你發現了類似錯誤，請不要着急，希望這篇文章可以幫到你。