éléments html ne pas afficher

Question

Ce code html Meteor n'a pas réussi à afficher le password-reset-form lorsque le click #password-reset-form-link est cliqué. J'ai regardé partout sans succès. Pourriez-vous s'il vous plaît m'aider à trouver la cause? Merci

'click #login-form-link': function (event) { 
 
    $('[type="checkbox"]').prop('checked', false); 
 
    $("#login-form").delay(100).fadeIn(100); 
 
    $("#register-form").fadeOut(100); 
 
    $("#password-reset-form").fadeOut(100); 
 
    $('#register-form-link').removeClass('active'); 
 
    $('#password-reset-form-link').removeClass('active'); 
 
    $(event.target).addClass('active'); 
 
    event.preventDefault(); 
 
    }, 
 
    'click #register-form-link': function (event) { 
 
    $('[type="checkbox"]').prop('checked', false); 
 
    $("#register-form").delay(100).fadeIn(100); 
 
    $("#login-form").fadeOut(100); 
 
    $("#password-reset-form").fadeOut(100); 
 
    $('#login-form-link').removeClass('active'); 
 
    $('#password-reset-form-link').removeClass('active'); 
 
    $(event.target).addClass('active'); 
 
    event.preventDefault(); 
 
    }, 
 
    'click #password-reset-form-link': function (event) { 
 
    $('[type="checkbox"]').prop('checked', false); 
 
    $("#password-reset-form").delay(100).fadeIn(100); 
 
    $("#login-form").fadeOut(100); 
 
    $("#register-form").fadeOut(100); 
 
    $('#login-form-link').removeClass('active'); 
 
    $('#register-form-link').removeClass('active'); 
 
    $(event.target).addClass('active'); 
 
    event.preventDefault(); 
 
    }, 
 
    'click #forgot': function() { 
 
    $('[type="checkbox"]').prop('checked', false); 
 
    $("#password-reset-form").delay(100).fadeIn(100); 
 
    $("#login-form").fadeOut(100); 
 
    $("#register-form").fadeOut(100); 
 
    $('#login-form-link').removeClass('active'); 
 
    $('#register-form-link').removeClass('active'); 
 
    $('#password-reset-form-link').addClass('active'); 
 
    event.preventDefault(); 
 
    }

body { 
 
    padding-top: 90px; 
 
} 
 
.panel-login { 
 
    border-color: #ccc; 
 
    -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2); 
 
    -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2); 
 
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2); 
 
} 
 
.panel-login>.panel-heading { 
 
    color: #00415d; 
 
    background-color: #fff; 
 
    border-color: #fff; 
 
    text-align:center; 
 
} 
 
.panel-login>.panel-heading a{ 
 
    text-decoration: none; 
 
    color: #666; 
 
    font-weight: bold; 
 
    font-size: 15px; 
 
    -webkit-transition: all 0.1s linear; 
 
    -moz-transition: all 0.1s linear; 
 
    transition: all 0.1s linear; 
 
} 
 
.panel-login>.panel-heading a.active{ 
 
    color: #029f5b; 
 
    font-size: 18px; 
 
} 
 
.panel-login>.panel-heading hr{ 
 
    margin-top: 10px; 
 
    margin-bottom: 0px; 
 
    clear: both; 
 
    border: 0; 
 
    height: 1px; 
 
    background-image: -webkit-linear-gradient(left,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0)); 
 
    background-image: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0)); 
 
    background-image: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0)); 
 
    background-image: -o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0)); 
 
} 
 
.panel-login input[type="text"],.panel-login input[type="email"],.panel-login input[type="password"] { 
 
    height: 45px; 
 
    border: 1px solid #ddd; 
 
    font-size: 16px; 
 
    -webkit-transition: all 0.1s linear; 
 
    -moz-transition: all 0.1s linear; 
 
    transition: all 0.1s linear; 
 
} 
 
.panel-login input:hover, 
 
.panel-login input:focus { 
 
    outline:none; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    border-color: #ccc; 
 
} 
 
.btn-login { 
 
    background-color: #59B2E0; 
 
    outline: none; 
 
    color: #fff; 
 
    font-size: 14px; 
 
    height: auto; 
 
    font-weight: normal; 
 
    padding: 14px 0; 
 
    text-transform: uppercase; 
 
    border-color: #59B2E6; 
 
} 
 
.btn-login:hover, 
 
.btn-login:focus { 
 
    color: #fff; 
 
    background-color: #53A3CD; 
 
    border-color: #53A3CD; 
 
} 
 
.forgot-password { 
 
    text-decoration: underline; 
 
    color: #888; 
 
} 
 
.forgot-password:hover, 
 
.forgot-password:focus { 
 
    text-decoration: underline; 
 
    color: #666; 
 
} 
 

 
.btn-register { 
 
    background-color: #1CB94E; 
 
    outline: none; 
 
    color: #fff; 
 
    font-size: 14px; 
 
    height: auto; 
 
    font-weight: normal; 
 
    padding: 14px 0; 
 
    text-transform: uppercase; 
 
    border-color: #1CB94A; 
 
} 
 
.btn-register:hover, 
 
.btn-register:focus { 
 
    color: #fff; 
 
    background-color: #1CA347; 
 
    border-color: #1CA347; 
 
}

<div class="container" id="login-div"> 
 
    <div class="row"> 
 
     <div class="col-md-6 col-md-offset-3"> 
 
     <div class="panel panel-login"> 
 
      <div class="panel-heading"> 
 
      <div class="row"> 
 
       <div class="col-xs-4"> 
 
       <a href="#" class="active" id="login-form-link">Login</a> 
 
       </div> 
 
       <div class="col-xs-4"> 
 
       <a href="#" class="" id="register-form-link">Register</a> 
 
       </div> 
 
       <div class="col-xs-4"> 
 
       <a href="#" class="" id="password-reset-form-link">Password reset</a> 
 
       </div> 
 
      </div> 
 
      <hr> 
 
      </div> 
 
      <div class="panel-body"> 
 
      <div class="row"> 
 
       <div class="col-lg-12"> 
 
       <form id="login-form" role="form" style="display: block;"> 
 
        <p>login form</p> 
 
       </form> 
 
       <form id="register-form" role="form" style="display: none;"> 
 
        <p>register form</p> 
 
       </form> 
 
       <form id="#password-reset-form" role="form" style="display: none;"> 
 
        <p>hi man</p> 
 
       </form> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

Answer 1

Vous avez une faute de frappe dans votre code HTML:

<form id="#password-reset-form" ...> 

Le # ne devrait pas être là:

<form id="password-reset-form" ...>