Javascript not working on mobile but works on desktop

Question

This works on a desktop browser, but not on my iOS mobile phone. I tried adding 'touchstart' and looked at this post's solution to check how other's got it to work, but it still isn't working. Any suggestions as to other options? I also tried adding e.preventDefault() - and added e to function(), but that didn't work as well.

I have tried:

 $('body').on('click touchstart', '.myContainer', function() {
     $(this).toggleClass('myContainer-unselected').toggleClass('myContainer-selected');
 });

Edit: It appears there may be something else going on, I changed the code to be as general as possible and it is not firing the event on iOS, but working in my chrome emulator:

$(document).on('click touchstart', 'body', function() {
      alert('hi');
    });

Additional update:

I have added the following code to my script.js file:

$('body').css('display', 'none');

As expected, the screen goes blank on my desktop browser for both local and on heroku, but when I test on mobile, the screen is not blank. It looks like js isn't working properly.

Images attached:

score 8 · Accepted Answer · answered Jul 07 '16 at 16:08

Answer: the reason it wasn't working on iOS Safari is because in my js page I was using ES6, specifically 'let' which is [not supported currently][1]. Changed to ES5 and the issue disappeared.

$('body').on('click', '.dashboard_leftNav_category a', function() {
      var link = $(this).attr('showSection'); //changed from let link
      var show = $('[section="'+link+'"]');
      $('[section]').hide();
      $('body').find(show).fadeIn();
      $('html,body').scrollTop(0);
    });

remove let fixed the problem for me. – cmac Apr 03 '17 at 19:51 — cmac, Apr 03 '17 at 19:51

score 1 · Answer 2 · answered Jul 07 '16 at 05:22

1

This should help you. Instead of binding it to the body element, bind the event to the document.

$(document).on('click touchstart', '.myContainer', function() {

      $(this).toggleClass('myContainer-unselected').toggleClass('myContainer-selected');
    });

Also try changing adding the following style to myContainer class

cursor : pointer;

answered Jul 07 '16 at 05:22

Krishnakumar_Muraleedharan

439
3
13

1

Thanks. I double checked to make sure in my style I added cursor:pointer, and I changed it to document. It still didn't work so I checked my browser console and saw that it was firing two events. I added e.stopImmediatePropagation(), but it was still firing two events. I think switched it from 'click touchstart' to just click, and now it fires only one event, but it is still not working on mobile. I then tried 'touchstart' without 'click' and it is not working on mobile either. It works in my mobile emulator in chrome, but not on my iphone. – Ron I Jul 07 '16 at 14:16

score 1 · Answer 3 · edited Feb 19 '19 at 01:53

1

You have two options:

Reset your mobile browser's history because your browser's cache reads the old source.
Change the name of your source file in the desktop and refresh your page again.

edited Feb 19 '19 at 01:53

Vickel

7,751
6
34
54

answered Feb 19 '19 at 00:29

Ahmadreza Azimi

11
6

score 0 · Answer 4 · answered Dec 18 '20 at 14:10

0

Put e.preventDefault(); inside your javascript function.

answered Dec 18 '20 at 14:10

Simonsoft177

135
1
13

Javascript not working on mobile but works on desktop

4 Answers4

Linked