jQuery新手实现点击按钮弹出输入框内容功能无响应求助

问题排查 #

• jQuery选择id元素时确实需要加#前缀，你最初的选择器写法没有问题，故障和选择器无关。
• 核心错误是<script>标签的错误用法：当<script>标签设置了src属性引入外部资源时，标签内部包裹的JS代码会被浏览器直接忽略，你写的点击事件绑定逻辑根本没有执行，所以点击按钮没有反应。
• 次要问题是jQuery的引入路径不规范：你填写的cdnjs.cloudflare.com/...是相对路径，除非你本地部署了对应路径的jQuery文件，否则会导致jQuery加载失败。

修复方案 #

拆分两个<script>标签，一个专门引入jQuery，另一个写自定义业务代码，补全jQuery的完整CDN路径即可，修复后的完整代码如下：

<!DOCTYPE html> 
<html>
   <head>
      <title>Button Event</title>
      <!-- 引入jQuery -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- 编写自定义逻辑 -->
      <script>
        $(document).ready(function() { 
          $('#hit').click(function() { 
            alert($('#term').val());
          });
        });
      </script>
   </head>
   <body> 
     <input id="term" type="text" value="enter your search"> 
     <button id="hit" type="button" name="Button">Search</button> 
   </body>
</html>

内容的提问来源于stack exchange，提问作者Hannes