Function load disables Jquery functions . Hide() and . show()

Question

Down here I have these two forms:

<div id="menu"></div> <!-- Carrego minha Navbar -->

<div class="container formularioCadastro" id="cadastro">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <form>
            </form>
        <div class="col-md-4"></div>
    </div>
</div>

<div class="container formularioLogin" id="Login">
     <div class="row">
         <div class="col-md-4"></div>
         <div class="col-md-4">
            <form>
            </form>
         <div class="col-md-4"></div>
     </div>
</div>

Here I define my jquery , I load my Navbar in the first line , and I hide my 2 forms , and I want when you click on the class . Btnlogin appear the form Login and hide the registration , vice and versa , but it does not work , only appears when I give a Reload on the page , and soon after some ; what to do?

$(document).ready(function () {
    $("#menu").load("menu.html");
    $("#Historia").load("historia.html"); 
    $("#cadastro").hide();
    $("#login").hide();
});

$(document).on("click", ".BtnLogin", function () {
    $("#cadastro").hide();
    $("#login").show();
});

$(document).on("click", ".BtnCadastro", function () {
    $("#login").hide();
    $("#cadastro").show();
}); 

My Navbar with buttons (Btnlogin and Btncadastro) below:

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" id="navbar-example2">
<a class="navbar-brand" href="index.html">
    <img src="img/logo.png" width="40" height="40" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
    <ul class=" navbar-nav mr-auto " id="BntNav">
        <li class="nav-item active NavActive">
            <a class="nav-link" href="cidades.html?pagina=b" > Barcelona <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="cidades.html?pagina=c" > Creta </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="cidades.html?pagina=d" > Dubrovnik </a>
        </li>
    </ul>
    <ul class="nav justify-content-end">
        <li class="nav-item ">
            <a class="nav-link BtnCadastro" href="cadastro.html"> <img src="img/carrinho.svg" width="30" height="30" alt="">
            </a>
        </li>
        <li class="nav-item ">
            <a class="nav-link BtnLogin" href="cadastro.html"> <img src="img/login.png" width="30" height="30" alt=""> </a>
        </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <a class="navbar-brand" href="#"> <img src="img/lupa.png" width="30" height="30" alt=""> </a>
    </form>
</div>

Answer 1

You have 2 problems with your code:

Missing cancel the action of links with event.preventDefault():

$(document).on("click", ".BtnLogin", function (e) {
   e.preventDefault();
    $("#cadastro").hide();
    $("#login").show();
});

$(document).on("click", ".BtnCadastro", function (e) {
   e.preventDefault();
    $("#login").hide();
    $("#cadastro").show();
}); 

If you do not cancel the link click action, it will direct the page to href.

Another problem is that the id="Login" is with L uppercase and in the selector $("#login") is with L lowercase. Javascript is case sensitive, i.e., "Login" and "login" are two different things.

Answer 2

I created a small example similar to your problem, see if you can adapt in your code.

See below, I changed the way to call the click event to the two buttons:

  $(document).ready(function(){
    $('#cadastro').hide();
    $('#login').hide();
  })
  

  $('#btnCadastro').click(function(){
    $('#cadastro').show();
    $('#login').hide();
  })

  $('#btnLogin').click(function(){
    $('#cadastro').hide();
    $('#login').show();
  })

  .form-cadastro,.form-login{
    height:100px;
    width:100px;
  }

  .form-cadastro{border: 3px solid black;color:black}
  .form-login{border: 3px solid red;color:red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <a href="#" id="btnCadastro">CADASTRO</a>
  <br>
  <a href="#" id="btnLogin">LOGIN</a>
  <br><br>
  <div id="cadastro" class="form-cadastro">CADASTRO</div>
  <div id="login" class="form-login">LOGIN</div>