jQuery事件处理功能失效问题排查与修复求助

嘿，我帮你找出了代码里导致事件失效的几个关键问题，咱们一步步来解决：

1. jQuery 引入顺序搞反了 #

你的自定义脚本依赖 jQuery，但如果把 jQuery 的 <script> 标签放在自定义脚本之后，浏览器加载时会先执行你的代码——这时候 jQuery 还没被加载，自然没法识别 $ 这类 jQuery 语法，直接就失效了。必须先引入 jQuery，再加载你的外部脚本。

2. Blur 事件里的选择器写错了 #

在密码框失焦的回调里，你写了 $("password_information").hide();——这里漏掉了 ID 选择器的核心符号 #！正确的写法应该是 $("#password_information").hide();，不然 jQuery 找不到对应的 DOM 元素，自然没法执行隐藏操作。

修复后的完整代码示例 #

调整顺序后的 HTML 结构 #

<!-- 先引入 jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 再引入你的外部脚本，路径换成你实际的文件名 -->
<script src="your-script-file.js"></script>

<form> 
  <ul> 
    <li> 
      <label for="username">Username:</label> 
      <span><input id="username" name="username" type="text"></span> 
    </li> 
    <li> 
      <label for="pswd">Password:</label> 
      <span><input id="pswd" type="password" name="pswd"></span> 
    </li> 
    <li> 
      <button type="submit">Register</button> 
    </li> 
  </ul> 
</form> 
<div id="password_information"> 
  <h4> Password must meet the following requirements:</h4> 
  <ul> 
    <li id="letter" class="invalid">At Least <strong>one letter</strong></li> 
    <li id="captial" class="invalid">At Least <strong>one capital</strong></li>
    <li id="number" class="invalid">At Least <strong>one number</strong></li> 
    <li id="length" class="invalid">At Least <strong>8 characters</strong></li> 
  </ul> 
</div>

修复后的外部脚本代码 #

$(document).ready(function() { 
  $("input[type=password]").focus(function() { 
    $("#password_information").show(); 
  }).blur(function() { 
    $("#password_information").hide(); // 这里补上了缺失的#
  }); 
}); 

额外小提示 #

以后遇到这类问题，可以打开浏览器开发者工具（按 F12），切换到「Console」标签页看看有没有报错信息——像找不到 jQuery、选择器错误这类问题，控制台都会直接提示，排查起来会快很多~

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