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

Question

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

Hello, guys! I am an industrial designer (designer and illustrator) by training and not a programmer, but I like learning and programming very much, see, I am a curious! I'm trying a jQuery plugin for client – side translations on a site-The "translate.js", and I thought it would be interesting that 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 class that was added by jQuery the thing desanda. If you can help me, I'll be very grateful. The following are the codes for analysis:

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

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

The pictures

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>

Once the image of the Brazilian flag is loaded, why can't I fire a function from the image, such as the translation or the " console.log()" same. How is it possible to do this? From now on, grateful for the help, thank you very much!

1

jquery jquery-ui

Author: Alexandre Soares da Silva, 2018-08-29

Source

1 answers

score 1 · Accepted Answer

After the page loads, the click events you have placed have already been set for the respective elements. Dynamic changes to elements will not be heard because 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 searching for any element in document that has the selector. The document is always updated because it represents the updated DOM structure. So even if you insert or change elements dynamically, those elements will be within document the way they were changed or inserted.

See:

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

Further Reading:

object document