I added a class with JQUERY and tried to use it to trigger a function, but it did not work, what's wrong?

Question

I added a class with JQUERY and tried to use it to trigger a function, but it did not work, what's wrong?

Navigation

#1 by (1 votes)

1

Hello everyone! I am an industrial designer (designer and illustrator) for training and not a programmer, but I really like learning and programming, you see, I'm a curious person! I'm trying out a jQuery plugin for client-side translations on a website - the "translate.js", and I thought it would be interesting if the translations were triggered by a "button", flag country / chosen language. My "button" works to some extent. When I try to click on the class that was added by jQuery the thing goes away. If you can help me, I'll be very grateful. Here are the codes for review:

(Note: the debug function "console.log ()" is playing the plugin function to simplify the concept.)

HTML

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

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

CSS

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

Images

JQUERY

<scriptsrc="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 Brazilian flag image is loaded, why can not I fire a function from the image, such as the translation or the "console.log ()" itself. How is this possible? Right now, thank you for the help, thank you!

jquery jquery-ui

asked by anonymous 30.08.2018 / 00:25

1 answer

How to control height within a Grid? Get the Connection String for Engines @PRIMAVERA

score 1 · Accepted Answer

After page loading, the click events you've placed have already been set for their elements. Dynamic changes in elements will not be heard because events are not dynamic.

You can delegate events to elements using the structure:

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

In this way, even if you dynamically change element classes, the events will work, because you are looking for any element in document that has the SELECTOR. document is always updated because it represents the updated DOM structure. Therefore, even if you dynamically insert or change elements, those elements will be within document as they have been changed or entered.

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--><imgclass="img-esp" src="esp.png" />

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

Additional reading:

Object document