removeClass not working on iOS

Question

When you click .menuButton jquery will add a class named active. This Jquery code works on Windows and on Android except on iOS (Tested with Chrome and Safari).

HTML5

<div class="menuButton">
  Menu Button
</div>
<div class="navmenu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Something</a></li>
  </ul>
</div>

Jquery

var removeClassVar = true;
$('.menuButton').on('click', function() {
  $('.navmenu').toggleClass('active');
  removeClassVar = false;
});
$('.navmenu').on('click', function() {
  removeClassVar = false;
});
$(document).on('click', function() {
  if (removeClassVar == true) {
      $('.navmenu').removeClass('active');
  }
  removeClassVar = true;
});

CSS3

.menuButton {
  display:block;
  cursor:pointer;
}
.navmenu {
  display:none;
}
.navmenu.active {
  display:block;
}

Problem: When you click on .menuButton the menu will show, but when you click on html the menu will not run removeClass('active'). This problem only occurs on iOS.

JsFiddle: https://jsfiddle.net/dkg7tyu0/

Updated JSFiddle: https://jsfiddle.net/dkg7tyu0/5/

Update Apparently iOS does not work with on('click'') however adding the following code will get me a Hello World $('.menuButton').on('touchstart click', function(){ alert('hello world'); });. Bad news is that changing my code from on('click') to on('touchstart click') will not make a difference in removing the class.

@A.Wolff If I do that it won't remove the `active` class (not on Chrome on Windows). — elJeffe, Mar 17 '16 at 13:44
How that? https://jsfiddle.net/dkg7tyu0/2/ Anyway you are overcomplicating it here and i'm still not sure what is your expected behaviour https://jsfiddle.net/dkg7tyu0/3/ ??? — A. Wolff, Mar 17 '16 at 13:47
@A.Wolff Sorry, my bad. Had `'document'` instead of `document`. I have changed it to `document` now but this doesn't make a difference on iOS. — elJeffe, Mar 17 '16 at 13:52
Sillier question, but why are you naming a boolean removeClass when a function exists with that name? — Nikki9696, Mar 17 '16 at 13:57
@A.Wolff Yes, just be sure I deleted it again but still the same problem. — elJeffe, Mar 17 '16 at 14:00
@Jeff But have you tried this one instead https://jsfiddle.net/dkg7tyu0/3/ If still not working then i don't see what could be the issue on IOS — A. Wolff, Mar 17 '16 at 14:04
@Nikki9696 There is a global `removeClass` function on IOS browser??? But anyway, that's correct OP should avoid so confusing global name variable — A. Wolff, Mar 17 '16 at 14:05
@A.Wolff Tried that JsFiddle and it works on Windows and Android but not on iOS. By the way, I've changed the boolean name ;) — elJeffe, Mar 17 '16 at 14:10
@A.Wolff not sure, but there's one defined in jquery, which he's using, so it's safest not to do that I think - not sure if IOS might have any bugs with scope — Nikki9696, Mar 17 '16 at 14:11
Oh hey did you see this? http://stackoverflow.com/questions/3705937/document-click-not-working-correctly-on-iphone-jquery — Nikki9696, Mar 17 '16 at 14:15
@Nikki9696 `$.fn.removeClass()` is defined on jQuery prototype, not window global scope but you are right it is more safe to not do that anyway — A. Wolff, Mar 17 '16 at 14:20

fabiovaz · Accepted Answer · 2016-03-17T14:56:30.153

5

try this

$(document).ready(function() {
  var $ua = navigator.userAgent;
  var $event = ($ua.match(/(iPod|iPhone|iPad)/i)) ? "touchstart" : "click";

  $(document).on($event, function(ev) {
    if ($('.navmenu').hasClass('active')) {
      $('.navmenu').toggleClass('active');
    }
  });
  $('.menuButton').on('click', function(e) {
    e.stopPropagation();
    $('.navmenu').toggleClass('active');
  });
});

http://codepen.io/fabiovaz/pen/VaPzqz

I really think your problems is $('html').click() on iOS, you can search other solutions (like touch actions) or check if this work $('html').click(function() { alert('hello world'); });

var ua = navigator.userAgent,
        event = (ua.match(/iPad/i)) ? "touchstart" : "click";

$(document).on(event, function (ev) {
    ...
});

edited Mar 17 '16 at 14:56

answered Mar 17 '16 at 14:06

fabiovaz

516
2
9

I changed the `$('html').on('click', function(){});` to `$(document).on('click', function(){});` but this does not make a difference. The code above works on Windows and Android, but not on iOS again. – elJeffe Mar 17 '16 at 14:14
2

you changed html cursor pointer? and tested userAgent? I think your problem is about document click function, not at your code. – fabiovaz Mar 17 '16 at 14:18
So tried the last bit (after your update) and it seems that iOS does not work with `on('click')` However I get an message if I put this code in `$('html').on('touchstart click', function() { alert('hello world'); });` but `touchstart` will not make my menu disappear. – elJeffe Mar 17 '16 at 14:30
2

$('html').on('touchstart', function() { alert('hello world'); }); – fabiovaz Mar 17 '16 at 14:38
I made a mistake, changing to `$(document).on('touchstart', function() { alert('hello world'); });` will get me a Hello World. But it will not make my menu disappear. – elJeffe Mar 17 '16 at 14:41
1

http://codepen.io/fabiovaz/pen/VaPzqz i put more code, please test. (sorry i have android only) – fabiovaz Mar 17 '16 at 14:42
1

Thank you! Only the Jquery code was needed and it works now on every device! :) – elJeffe Mar 17 '16 at 14:45
Using touch start like this is not advised, as users who are trying to scroll will inadvertently trigger your click event. OP, are you sure you applied cursor:pointer; correctly? That is the verified solution to the problem and I can personally confirm that it works in iOS – Wesley Smith Mar 17 '16 at 16:43

score 0 · Answer 2 · answered Mar 17 '16 at 13:44

0

Can you try this ?

see here https://jsfiddle.net/dkg7tyu0/1/

if (!$('.navmenu').hasClass('active')) {
        $('.navmenu').addClass('active');
      removeClass = false;
    }

answered Mar 17 '16 at 13:44

Greg

826
5
21

removeClass not working on iOS

2 Answers2

Linked