更改html元素后,我无法调用jquery事件

时间:2018-03-14 03:45:05

标签: javascript jquery html events

我正在尝试通过链接点击事件在我已经更改其html之后更改我的模式,但不幸的是它不起作用,我只是一个新学生,所以我想知道为什么这不起作用...

OBS:我是巴西人,所以代码的某些部分将是葡萄牙文。

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";    
        }               

    });
 });

1 个答案:

答案 0 :(得分:0)

如果你说你点击一次更改它,那么点击事件似乎没有注册到#linkModal,可能是因为你需要更改

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

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

很难说出这里发生了什么,因为你没有任何带有ID&#34;#linkModal&#34;的元素。在您共享的代码中。