I added a class with JQUERY and tried to use it to trigger a function, but it didn’t work, what’s wrong?

Question

Hey there, guys! I am an industrial designer (designer and illustrator) by training and not a programmer, but I love learning and programming, you see, I’m curious! I’m experiencing a plugin from jQuery to client side translations on a website - the "Translate.js", and I thought it would be interesting if the translations were triggered by a "button", flags of the chosen country / language. My "button" works to a certain extent. When I try to click on the class that was added by jQuery the thing goes off. If you can help me, I would be very grateful. Follow the codes for analysis:

(Obs.: the function of debug "console.log()" is playing the role of the plugin, to simplify the concept.)

THE HTML

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

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

THE CSS

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

The images

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

Once the image of the flag of Brazil is loaded, why can not trigger a function from the image, as the translation or the "console.log()" same. How is it possible to do this? Thanks for your help, thank you very much!

Answer 1

After page loading, the events click which you have already set out for the respective elements. Dynamic changes in the elements will not be heard because the events are not dynamic.

You can delegate events to elements using the structure:

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

This way, even if you change the classes of the elements dynamically, the events will work, because you are looking for any element in the document with the selector. The document is always updated because it represents the updated DOM structure. So, even if you insert or change elements dynamically, these elements will be inside the document as amended or inserted.

Behold:

$(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" />

Additional reading:

• Object document