1

In a multilingual website there is a simple jQuery .click event that adds a class on the search button.

The class "load_IT" is added on the Italian website and the class "load_EN" is added to the English website.

Italian version:

$("#doSearch").click(function() {
  $("#doSearch").last().addClass("load_IT");
});

English version:

$("#doSearch").click(function() {
  $("#doSearch").last().addClass( "load_EN" );
});

Everything seems to work fine with jQuery, the class is successfully added on both versions of the website.

Both of these classes have a simple CSS ::after selector like the example (the .css file is the same for both websites):

.load_IT::after {
    content: 'Caricamento...';
    -o-animation: bookingBlink 1s linear infinite;
    -ms-animation: bookingBlink 1s linear infinite;
    -moz-animation: bookingBlink 1s linear infinite;
    -webkit-animation: bookingBlink 1s linear infinite;
    top: 8px;
}

.load_EN::after {
    content: 'Loading...';
    -o-animation: bookingBlink 1s linear infinite;
    -ms-animation: bookingBlink 1s linear infinite;
    -moz-animation: bookingBlink 1s linear infinite;
    -webkit-animation: bookingBlink 1s linear infinite;
    top: 8px;
}

@keyframes bookingBlink {
    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .3
    }
}

@-webkit-keyframes bookingBlink {
    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .3
    }
}

The problem now is that the only last one works.

If in the CSS file I first write the "load_IT" class and then "load_EN" class, only the last one will work (load_EN) and everything is fine in the English website.

If in the CSS file I first write the "load_EN" class and then "load_IT" class, only the last one will work (load_IT) and everything is fine in the Italian website.

That's strange, why does this happen?

  • Already tried:
    • Switch the order of classes.
    • Put one of the class at the top of CSS and the other one at the bottom.
    • Change completely the classes name.
    • Remove the animations.
    • Use :after (CSS2) and ::after(CSS3)
    • Use ::before on one class and ::after on the other class.

To understand better what's happening I have also tried to add the classes to the button directly in the html. Unfortunately, the problem is the same and I assume that is not a jQuery problem.

JSFiddle example

https://jsfiddle.net/e3dc6o48/3/

In JSFiddle it works, it's clear that the problem is somewhere in my code. Where can be the issue? In CSS or in the HTML file?

deltaforce
  • 524
  • 1
  • 8
  • 25
wrkman
  • 100
  • 1
  • 12
  • 2
    Please include your html and even better make a working snippet of the problem – Carsten Løvbo Andersen Jul 16 '18 at 12:06
  • so you have 2 completely different websites ? or how do you run the jquery code differently ? also why don't you use `this` inside the click function ? – Mihai T Jul 16 '18 at 12:12
  • 2
    it is working for me http://jsfiddle.net/9m345bvk/4/ – Nitin Sawant Jul 16 '18 at 12:13
  • Yes, definitively the same code in jsfiddle.net works. It's clear that the problem is in the code but witch one? CSS or HTML? @MihaiT – wrkman Jul 16 '18 at 12:28
  • @CarstenLøvboAndersen thank you for your suggestion, done. And here seems that it works.. – wrkman Jul 16 '18 at 12:29
  • so in your html after clicking the button you have only one class at a time. `it` or `en` not both ? right ? – Mihai T Jul 16 '18 at 12:30
  • 2
    why do you call `last()` when calling `addClass()`? – piraces Jul 16 '18 at 12:37
  • @MihaiT of course, thank's for asking. One the Italian website I add load_IT and in the Englis website load_EN. – wrkman Jul 16 '18 at 12:45
  • @rpfc, without reason. Thank you for your information, I have corrected it in my code :) – wrkman Jul 16 '18 at 12:46
  • 1
    `last() -> Reduce the set of matched elements to the final one in the set.` is this needed? Here is an alternate fiddle using `toggleClass` https://jsfiddle.net/e3dc6o48/18/. –  Jul 16 '18 at 12:47
  • 1
    well besides the fact that i don't know why you use `last` and the fact that you do not use `this` inside the `click` function, your code should work as intended. Please check your CSS closing/strating `{}` and other possible typo mistakes. If we cannot replicate your problem it's nearly impossible to give you a solution – Mihai T Jul 16 '18 at 12:47

0 Answers0