I can't call a jquery event after changing a html element

Question

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">&times;</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";    
        }               

    });
 });

Answer 1

If you're saying that you click to change it once and then, it seems that the click event doesn't register to the #linkModal, it may be because you need to change

$("#linkModal").click(function(){

to

$(document).on("click","#linkModal",function(){

it's hard to tell what's going on here, because you don't have any elements with the ID "#linkModal" in the code that you shared.