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
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!