1

Olá, pessoal! Sou desenhista industrial (designer e ilustrador) por formação e não programador, mas gosto muito de aprender e de programação, veja bem, sou um curioso! Estou experimentando um plugin de jQuery para traduções do lado do cliente em um site – o "translate.js", e achei que seria interessante que as traduções fossem disparadas por um "botão", bandeirinhas do país / idioma escolhido. O meu "botão" funciona até certo ponto. Quando tento clicar na classe que foi acrescida pelo jQuery a coisa desanda. Se puderem me ajudar, ficarei muito grato. Seguem os códigos para análise:

(Obs.: a função de debug "console.log()" está fazendo o papel da função do plugin, para simplificar o conceito.)

O HTML

<!-- ESP -->
<img class="img-esp" src="esp.png" />

<!-- FRA -->
<img class="img-fra" src="fra.png" />

O CSS

/*
CSS
*/
.img-esp, 
.img-fra, 
.img-por { cursor: pointer; }

As imagens

inserir a descrição da imagem aqui inserir a descrição da imagem aqui inserir a descrição da imagem aqui

O JQUERY

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"> /* From JQUERY CDN */ </script> 
<script>
/*
JQUERY
*/

$(document).ready(function() {

    $(".img-esp").on("click", function() {

        // Mudar a bandeirinha da Espanha para a do Brasil
        $(".img-esp").attr("src", "bra.png");

        $(".img-fra").attr("src", "fra.png");

        $(".img-esp").addClass("img-por"); 

        // Funciona!
        console.log("ESP para BRA");
    });



    $(".img-fra").on("click", function() {

        // Mudar a bandeirinha da França para a do Brasil
        $(".img-fra").attr("src", "bra.png");

        $(".img-esp").attr("src", "esp.png");

        $(".img-fra").addClass("img-por"); 

        // Funciona!
        console.log("FRA para BRA");
    });



    $(".img-por").on("click", function() {

        $(".img-esp").attr("src", "esp.png");

        $(".img-fra").attr("src", "fra.png");

        // Não funciona! Por quê?!
        console.log("BRASIL");
    });

}); </script>

Uma vez que a imagem da bandeira do Brasil é carregada, por que não posso disparar uma função a partir da imagem, como a de tradução ou o "console.log()" mesmo. Como é posível fazer isso? Desde já, grato pela ajuda, muito obrigado!

1 Resposta 1

1

Após o carregamento da página, os eventos click que você colocou já foram definidos para os respectivos elementos. Alterações dinâmicas nos elementos não serão ouvidas porque os eventos não são dinâmicos.

Você pode delegar os eventos aos elementos usando a estrutura:

$(document).on("click", SELETOR, function(){...

Desta forma, mesmo que você altere as classes dos elementos de forma dinâmica, os eventos irão funcionar, porque você está buscando qualquer elemento no document que possua o SELETOR. O document é sempre atualizado pois representa a estrutura do DOM atualizada. Logo, mesmo que você insira ou altere elementos de forma dinâmica, esses elementos estarão dentro do document da forma que foram alterados ou inseridos.

Veja:

$(document).ready(function() {

    $(document).on("click", ".img-esp", function() {

        // Mudar a bandeirinha da Espanha para a do Brasil
        $(".img-esp").attr("src", "bra.png");

        $(".img-fra").attr("src", "fra.png");

        $(".img-esp").addClass("img-por"); 

        // Funciona!
        console.log("ESP para BRA");
    });

    $(document).on("click", ".img-fra", function() {

        // Mudar a bandeirinha da França para a do Brasil
        $(".img-fra").attr("src", "bra.png");

        $(".img-esp").attr("src", "esp.png");

        $(".img-fra").addClass("img-por"); 

        // Funciona!
        console.log("FRA para BRA");
    });

    $(document).on("click", ".img-por", function() {

        $(".img-esp").attr("src", "esp.png");

        $(".img-fra").attr("src", "fra.png");

        // Não funciona! Por quê?!
        console.log("BRASIL");
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Esp -->
<img class="img-esp" src="esp.png" />

<!-- Fra -->
<img class="img-fra" src="fra.png" />

Leitura adicional:

1
  • 1
    O cerne da questão é o "dinamicamente", entendi o que disse, muito obrigado! Commented 30/08/2018 às 19:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .