0

I have the following jQuery code to add a class to a anchor tag when its clicked, the objective is to give the anchor tag a border bottom:

$(".breadcrumbs > li > a").click(function(){
     $(this).addClass('hoveractive');
});

on Ios this class is never added and so the styles are not applied, Rest of the code is below:

.breadcrumbs > li > a.hoveractive {
    border-bottom : 1px solid #f05034;
}

HTML::-

<ul class="breadcrumbs">
     <li><a href="/en">Home</a></li>
     <li><a href="/en/about-desuninr">About Desunin<sup>®</sup> </a></li>
     <li>Interesting links</li>
 </ul>

basically i just want the class to be added for a fraction of a secound before the page refreshes and goes to the next link, but this does't seem to be happening.

If i change my code to the below, 

$(".breadcrumbs > li > a").click(function(){
     $(this).addClass('hoveractive');
     return false;
});

I.E. include a return false statement , then the class is added in ios, but that's ofcourse not what i want to be doing , so to summerise my question why is my addClass not working in ios ?

Alexander Solonik
  • 9,838
  • 18
  • 76
  • 174
  • 1
    check out the similar post [here](https://stackoverflow.com/questions/36062221/removeclass-not-working-on-ios). – jayly Mar 09 '18 at 07:52
  • @jayly amazing ... solved the issue , i still don't understand the `why` click does't work but `touchstart` does. – Alexander Solonik Mar 09 '18 at 08:00
  • 1
    here's another helpful [post](https://stackoverflow.com/questions/15095868/jquery-click-not-working-in-ios) :) – jayly Mar 09 '18 at 08:38
  • @jayly that has to do with event delegation i believe :) .. in this case i think the difference between touchstart and click comes into play -- https://stackoverflow.com/questions/9633297/touchstart-vs-click-what-happens-under-the-hood/9634715#9634715 – Alexander Solonik Mar 09 '18 at 08:41
  • 1
    awesome, glad you found the answer you were looking for :) – jayly Mar 09 '18 at 08:43

1 Answers1

0

Try to bind the click event from document and see if that helps,

$(document).on('click', '.breadcrumbs > li > a', function(){
 $(this).addClass('hoveractive');
});
Manju
  • 2,520
  • 2
  • 14
  • 23