JSP页面中JavaScript与jQuery功能失效问题求助

问题现象 #

JSP页面通过CDN引入jQuery 3.6.1（网络连接正常），但出现两个异常：

• 原本<p>标签onclick调用alert()可正常运行，自定义alert()函数后功能异常
• jQuery实现的<p>点击隐藏功能完全失效

代码中的错误点 #

• 自定义alert函数无限递归：自定义的alert()函数内部又调用alert("hello")，触发自身无限循环，浏览器会因递归溢出阻塞，导致后续代码无法执行，同时原生alert被覆盖后也无法正常工作。
• jQuery选择器语法错误：$(document).ready回调里的("p")缺少$前缀，正确写法应为$("p")，否则不是合法的jQuery选择器，无法绑定点击事件。
• 外部脚本标签type属性错误：引入script.js的标签使用了type="javascript"，正确值应为type="text/javascript"（HTML5中可省略该属性），错误的type会导致浏览器忽略该脚本。
• 无效DOM标签：<h1>标签后多余了一个</div>，无对应开启标签，属于无效DOM结构。

修正后的代码 #

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <script src="despage/javascript/script.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script type="text/javascript">
    // 重命名自定义函数，避免覆盖原生alert
    function customAlert() {
      alert("hello");
    }
    $(document).ready(function() {
      // 修正jQuery选择器，添加$前缀
      $("p").click(function() {
        $(this).hide();
      });
    });
  </script>
  <meta charset="ISO-8859-1">
  <title>home</title>
</head>
<body>
  <h1 style="text-align:center;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;font-weight: bolder;color:rgb(222, 222, 222);">HEAD</h1>
  <!-- 修改onclick调用自定义函数 -->
  <p onclick="customAlert()">this one is for test</p>
</body>
</html>

关键修正说明 #

1. 避免覆盖原生alert：将自定义函数命名为customAlert，不再与原生alert冲突，内部调用原生alert不会触发递归。
2. 修复jQuery选择器：给("p")添加$前缀，确保正确选中<p>元素并绑定点击隐藏事件。
3. 清理无效标签：移除<h1>后的多余</div>，保证DOM结构合法。
4. 修正脚本标签属性：移除外部脚本的错误type属性，确保脚本能被正确解析。

内容的提问来源于stack exchange，提问作者ASWIN DEV D R