jQuery 不适用于事件处理答案

【问题标题】：jQuery not working for event handlingjQuery 不适用于事件处理
【发布时间】：2018-01-16 14:41:02
【问题描述】：

我对 jQuery 还很陌生，但我知道一些事情。但是，当我尝试进行活动时，它似乎永远不会起作用。
HTML 代码：

$(document).ready(function() {
  $("input[type=password]").focus(function() {
    $("#password_information").show();
  }).blur(function() {
    $("password_information").hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.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>
  </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 captial</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>

这是在与 html 文件相同位置的外部脚本中。

由于某种原因它不起作用，您能解释一下原因或帮我解决这个问题吗？

【问题讨论】：

你的控制台日志说什么？你确定正在加载 jQuery 库吗？
您是否将每个 JS 文件正确链接到您的 HTML？首先是 JQuery，然后是你的文件？
“为什么这段代码不起作用”不在 StachOverflow 上。请详细说明您遇到了什么错误，您采取了哪些调试步骤。
投票结束是一个错字...$("password_information")

标签： javascript jquery

【解决方案1】：

您可以使用 jQuery 的 focus() 和 focusout() 方法来实现。

jQuery(document).ready(function() {
  jQuery("input[type=password]").focus(function(){
    jQuery("#password_information").show();
  });
  jQuery("input[type=password]").focusout(function(){
    jQuery("#password_information").hide();
  });
});

#password_information{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.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>
  </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 captial</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>

【讨论】：

还是不行，什么也没发生。另外，为什么要替换 $ 为“JQuery”，因为我已经这样做并尝试了 $ 和 jQuery，但仍然没有发生任何事情
请尝试运行上面的代码sn-p并点击密码字段..
那么为什么我的不起作用。这可能与我引用我的 js 文件的方式有关吗？
'你为什么要替换 jQuery 的 $？'我的答案在这个链接中。 stackoverflow.com/questions/3291680/… 仔细检查您的代码并确保您已在标题中导入了 jQuery 脚本。或者检查浏览器的控制台日志是否有任何错误。
并确保您已隐藏您的密码信息 div，以便 'show()' 和 'hide()' 方法可以工作。

【解决方案2】：

找到问题了，是哈希（用于 id 选择）：

$(document).ready(function() {
  $("input[type=password]").focus(function() {
    $("#password_information").show();
  }).focusout(function() { //blur and focusout both works fine
    $("#password_information").hide(); //here you forgot it 
  });
});

【讨论】：