I'm trying to change my modal through a link click event after I already changed its html, but unfortunately it's not working, I'm just a new student, so I'd like to know why this isn't working...
OBS: I'm Brazilian, so some parts of the code will be in Portuguese.
HTML CODE
<div id="modais" class="mt-5 row">
<div class="modal fade text-dark mx-auto" id="loginModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Faça login</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-center">
<form class=" mx-auto col-10 border rounded py-3 px-4">
<div class="form-group row">
<label for="loginEmail">E-mail de login</label>
<input class="form-control " type="email" name="loginEmail" id="loginEmail" />
</div>
<div class="form-group row">
<label for="loginSenha">Senha</label>
<!--HERE IS THE LINK ########## --><input class="form-control " type="password" name="loginSenha" id="loginSenha" />
</div>
<p class="small">Não tem uma conta? Cadastre-se clicando <a id="linkModal" href="#">aqui</a></p>
</form>
<p class="small"><span class="text-danger">*</span>Para cadastrar quaisquer atividades é necessário ter uma conta admnistrativa.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Entrar</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Sair</button>
</div>
</div>
</div>
</div>
</div>
JQUERY CODE
$(document).ready( function(){
var modal = "login";
$("#linkModal").click(function(){
if(modal == "login"){
$("#modais").fadeOut("fast");
$(".modal-title").html("Sing up");
$(".modal-body").html('<div class="modal-body text-center"> <form class=" mx-auto col-10 border rounded py-3 px-4"> <div class="form-group row"> <label for="cadastroEmail">E-mail para cadastro</label> <input class="form-control " type="email" name="cadastroEmail" id="cadastroEmail" /> </div> <div class="form-group row"> <label for="cadastroSenha">Senha</label> <input class="form-control " type="password" name="cadastroSenha" id="cadastroSenha" /> </div> <p class="small">Sing in clicking <a id="linkModal" href="#">here</a></p> </form> <p class="small"><span class="text-danger">*</span>Para cadastrar quaisquer atividades é necessário ter uma conta admnistrativa.</p> </div>');
$("#modais").fadeIn("fast");
modal = "cadastro";
}
else{
$("#modais").fadeOut("fast");
$(".modal-title").html("Sing in");
$(".modal-body").html('<div class="modal-body text-center"> <form class=" mx-auto col-10 border rounded py-3 px-4"> <div class="form-group row"> <label for="loginEmail">E-mail de login</label> <input class="form-control " type="email" name="loginEmail" id="loginEmail" /> </div> <div class="form-group row"> <label for="loginSenha">Senha</label> <input class="form-control " type="password" name="loginSenha" id="loginSenha" /> </div> <p class="small">Don\'t you have a account? Sing up clicking <a id="linkModal" href="#">here</a></p> </form> <p class="small"><span class="text-danger">*</span>Para cadastrar quaisquer atividades é necessário ter uma conta admnistrativa.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Entrar</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Sair</button> </div> </div>');
$("#modais").fadeIn("fast");
modal = "login";
}
});
});