The "ON()" is not acting as expected, why?

Question

The "ON()" is not acting as expected, why?

Asked 6 years, 2 months ago

Viewed 43 times

1

Dear friends, I am a student and curious in the subject, not an experienced programmer, hence my question.

Come on, JQUERY’s "ON()" method can be associated with several types of events ("click", "mouseleave", etc.), including more than one at the same time, right?! Well, through the "ON" method and a "CLICK" event, I tried to associate a change in the "SRC" of the image (in the "ALT" and in the "TITLE", too). What you expected would happen, which was basically changing the image by clicking on it, happens unsatisfactorily, the image changes very quickly and does not stay with the change, as you would expect. It only occurs at the instant of the click and returns to what it was after releasing the mouse button.

Follow HTML, images and JQUERY for analysis. (Thanks for your help!)

HTML

<a href=""> <!-- Espanha --> <img class="img-esp" src="img/esp.png" alt="España" title="España" /></a>

IMAGERY (Flags)

JQUERY

$(document).ready(function() {

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

       //Mudar a bandeirinha para a do Brasil (idioma português)
       $(this).attr("src", "img/bra.png");

       //Mudar o atributo ALT da bandeirinha (idioma português)
       $(this).attr("alt", "Português (Brasil)");

       //Mudar o atributo TITLE da bandeirinha (idioma português)
       $(this).attr("title", "Português (Brasil)");
    });
});

I believe this is due to the attribute href be present at the tag a, to resolve, change "click", function(e) { e.preventDefault(); ... or just add a return false; or simply remove the attribute.

– NoobSaibot

2018/08/28 at 23:36
I removed A HREF and it worked! Thank you very much! Thanks!

– Alexandre Soares da Silva

2018/08/28 at 23:41
What is "e. preventDefault();"? Sorry I’m curious to ask you.

– Alexandre Soares da Silva

2018/08/28 at 23:42
preventDefault is used to change the default behavior of an element in html. https://jsfiddle.net/pq8Lkuso/3/ see if this is what you want. Just add <a href='javascript:void(0);'>

– Rafael Salomão

2018/08/28 at 23:46
If <a> is not serving, you can remove it all and not just href.

– Sam

2018/08/29 at 00:14
Thanks for the help, guys!

– Alexandre Soares da Silva

2018/08/29 at 21:47

Show 1 more comment

1 answer

Browser other questions tagged jquery jquery-ui

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2018-08-29T00:37:41+00:00

Young man, allow me to make a few remarks about your code:

The use of tag <a> can be dismissed if you are using the event click directly in the image. Do not just remove the href, remove the tag <a> all. What was happening was that by clicking on the flag the page was being updated and you didn’t even notice.

By changing the attributes of the same element several times, do this at once, using the structure:

$(this).attr({
   "src": "img/bra.png",
   "alt": "Português (Brasil)",
   "title": "Português (Brasil)"
});

Just separate the pairs with two-points (:) and a pair of another with a comma (,), and include everything between keys ({}). No need to keep repeating $(this).attr several times.

And, to leave the flag with the default cursor of a link, include it in the CSS:

.img-esp{
   cursor: pointer;
}

This is important for the user to see that there is some action when being clicked.

If you’re using <!DOCTYPE html> (what should use), do not use auto-closure in tags:

<img class="img-esp" src="img/esp.png" alt="España" title="España"/>
                                                                  ↑
                                                          auto-fechamento

Your code with the suggestions cited would look like this:

$(document).ready(function() {
   $(".img-esp").on("click", function(){
      //Mudar a bandeirinha para a do Brasil (idioma português)
      $(this).attr({
         "src": "img/bra.png",
         "alt": "Português (Brasil)",
         "title": "Português (Brasil)"
      });
   });
});

.img-esp{
   cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img-esp" src="img/esp.png" alt="España" title="España">