jQuery not working for event handling

Question

I'm fairly new to jQuery but I know a couple of things. However when I try to do events it never seems to work.
HTML code:

$(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>

This is in an external script within in the same location as the html file.

For some reason it doesn't work, could you explain why or help me fix that?

What's your console log say? Are you sure the jQuery library is being loaded? — Adam, Jan 16 '18 at 14:41
Did you link every JS file correctly to your HTML ? JQuery first then your file? — Zenoo, Jan 16 '18 at 14:42
"Why does this code not work" is off topic on StachOverflow. Please elaborate on what errors you're experiencing, what debug steps you have taken. — Glubus, Jan 16 '18 at 14:42

score 2 · Accepted Answer · edited Jan 16 '18 at 15:16

2

You can use jQuery's focus() and focusout() method to achieve this.

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>

edited Jan 16 '18 at 15:16

Louys Patrice Bessette

33,375
6
36
64

answered Jan 16 '18 at 14:55

Tibs

735
5
16

Still doesn't work, nothing happens. Plus why are you replacing the $ for "JQuery" because i have done this and tried both $ and jQuery and still nothing happened – Zac Cotterell Jan 16 '18 at 14:59
Please try to run the code snippet above and click on the password field.. – Tibs Jan 16 '18 at 15:00
so why does mine not work . Could it be something to do with how I'm referencing my js file? – Zac Cotterell Jan 16 '18 at 15:02
'Why are you replacing the $ for jQuery?' My answer is in this link. https://stackoverflow.com/questions/3291680/jquery-syntax-when-to-use-dollar-vs-jquery Double check your code and make sure that you have imported the jQuery script in your header. Or check your browser's console log for any errors. – Tibs Jan 16 '18 at 15:05
And make sure that you've hidden your password_information div so that 'show()' and 'hide()' method will work. – Tibs Jan 16 '18 at 15:06

score 0 · Answer 2 · answered Jan 17 '18 at 08:07

found the problem, it's the hash(for id selecting):

$(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 
  });
});

jQuery not working for event handling

2 Answers2