Jquery appendTo html 到 javascript 函数

Question

building a show your password with a caps lock warning on a form. But need to use appendTo so the HTML can be added to a pre-written shortcode.

Whenever the Html is added by appendTo the Javascript function can not find the added HTML.

code: https://codepen.io/edutize/pen/qBZXmOZ

<div class="memberium-form">

<form name="loginform" id="loginform" action="https://traderonthestreet.com/wp-login.php" method="post">
  <input id="learndash-login-form" type="hidden" name="learndash-login-form" value="754942d3df">
  <p class="login-username">
    <label for="user_login"></label>
    <input type="text" name="log" id="user_login" class="input" value="" size="20" placeholder="Email *">
  </p>
  <p class="login-password">
    <label for="user_pass"></label>
    <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" placeholder="Password *">
  </p>
  
  <p class="login-submit">
    <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Login">
    <input type="hidden" name="redirect_to" value="https://traderonthestreet.com/wp-admin/">
  </p>
  
</form>

  $(document).ready(function(){
      $("<span></span>").appendTo(".login-password").attr("toggle", "#user_pass").addClass("fa fa-fw 
    fa-eye field-icon toggle-password");
      $("<p>WARNING! Caps lock is ON.</p>").appendTo(".login-password").attr("id", "caps");    
    });


    $(".toggle-password").click(function() {

      $(this).toggleClass("fa-eye fa-eye-slash");
      var input = $($(this).attr("toggle"));
      if (input.attr("type") == "password") {
        input.attr("type", "text");
      } else {
        input.attr("type", "password");
      }
    });


    var input = document.getElementById("user_pass");
    var text = document.getElementById("caps");
    input.addEventListener("keyup", function(event) {

    if (event.getModifierState("CapsLock")) {
        text.style.display = "block";
      } else {
        text.style.display = "none"
      }
    });

Answer 1

You're generating elements inside document ready which usually is initiated later than when the JS is loaded. When the $(".toggle-password").click(function() event listener is attached to .toggle-password , #caps doesn't exists yet.

Either moving the event listener into the document ready after the #caps element is created or moving the #caps element creation outside the document ready will work.

 // Jquery appendTo capslock message and eye icons html $(document).ready(function(){ $("<span></span>").appendTo(".login-password").attr("toggle", "user_pass").addClass("fa fa-fw fa-eye field-icon toggle-password"); $("<p>WARNING! Caps lock is ON.</p>").appendTo(".login-password").attr("id", "caps"); // toggle between classes and change attribute type $(".toggle-password").click(function() { $(this).toggleClass("fa-eye fa-eye-slash"); var input = $($(this).attr("toggle")); if (input.attr("type") == "password") { input.attr("type", "text"); } else { input.attr("type", "password"); } }); // capslock function change style from display none to block var input = document.getElementById("user_pass"); var text = document.getElementById("caps"); document.addEventListener("keyup", function(event) { if (event.getModifierState("CapsLock")) { text.style.display = "block"; } else { text.style.display = "none" } }); });

 .login-username input[type=text] { display: block; margin-left: auto; margin-right: auto; width: 50%; padding: 12px; padding-left: 15px; border: none; border-radius: 4px; resize: vertical; font-family: 'Roboto', sans-serif; font-size: 15px; outline: none; background-color: #f0f0f0; margin-top: 10px; margin-bottom: 10px; transition: .1s; } .login-username input[type=text]:hover { background-color: #e6e6e6; transform: scale(1.01); } .login-password input[type=password] { display: block; margin-left: auto; margin-right: auto; width: 50%; padding: 12px; padding-left: 15px; border: none; border-radius: 4px; resize: vertical; font-family: 'Roboto', sans-serif; font-size: 15px; outline: none; background-color: #f0f0f0; margin-top: 10px; margin-bottom: 10px; transition: .1s; } .login-password input[type=password]:hover { background-color: #e6e6e6; transform: scale(1.01); } .login-password input[type=text] { display: block; margin-left: auto; margin-right: auto; width: 50%; padding: 12px; padding-left: 15px; border: none; border-radius: 4px; resize: vertical; font-family: 'Roboto', sans-serif; font-size: 15px; outline: none; background-color: #f0f0f0; margin-top: 10px; margin-bottom: 10px; transition: .1s; } .login-password input[type=text]:hover { background-color: #e6e6e6; transform: scale(1.01); } #caps { display: none; margin-left: auto; margin-right: auto; width: 50%; color: red; } .field-icon { margin-left: 72.5%; margin-right: auto; z-index: 2; position: absolute; margin-top: -40px; color: #8A8A8A; } .login-submit input[type=submit] { display: block; margin-left: auto; margin-right: auto; width: 50%; padding-top: 20px; padding-bottom: 20px; background-color: #24af61; border: #24af61; border-radius: 5px !important; border-width: 1.5px; color: white; cursor: pointer; display: block; border-radius: 5px; font-family: 'Poppins', sans-serif; font-size: 18px; transition: 0.3s; font-weight: bold; margin: 30px auto; } .login-submit input[type=submit]:hover { background-color: #ffffff; -webkit-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.11); -moz-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.11); box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.11); transform: scale(1.05); color: #24af61; border-style: solid; border: #24af61; border-width: 1.5px; border-radius: 15px; } @media screen and (max-width: 767px) { .login-password input[type=password] , .login-username input[type=text] , .login-submit input[type=submit] { width: 75%; } @media screen and (max-width: 767px) { .field-icon { margin-left: 82%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="memberium-form"> <form name="loginform" id="loginform" action="https://traderonthestreet.com/wp-login.php" method="post"> <input id="learndash-login-form" type="hidden" name="learndash-login-form" value="754942d3df"> <p class="login-username"> <label for="user_login"></label> <input type="text" name="log" id="user_login" class="input" value="" size="20" placeholder="Email *"> </p> <p class="login-password"> <label for="user_pass"></label> <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" placeholder="Password *"> <!-- html thats being added by jquery appendTo --> <!-- <span toggle="#user_pass" class="fa fa-fw fa-eye field-icon toggle-password"></span> <p id="caps">WARNING! Caps lock is ON.</p> --> </p> <p class="login-submit"> <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Login"> <input type="hidden" name="redirect_to" value="https://traderonthestreet.com/wp-admin/"> </p> </form> </div>