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 9 · Accepted Answer · answered Jul 07 '16 at 16:08

9

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);
    });

answered Jul 07 '16 at 16:08

Ron I

4,090
8
33
64

1

remove let fixed the problem for me. – cmac Apr 03 '17 at 19:51
This was answered back in 2016. As of Mar 2023, iOS Safari and Chrome for Android both support ES6. https://caniuse.com/?search=es6 – OXiGEN Mar 31 '23 at 08:45

score 5 · Answer 2 · edited Feb 19 '19 at 01:53

5

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,879
6
35
56

answered Feb 19 '19 at 00:29

Ahmad Reza Azimi

534
5
16

score 1 · Answer 3 · 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 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

175
2
22

score 0 · Answer 5 · answered Mar 31 '23 at 09:56

To test if JS is loading at all, add a simple alert('hello'); as the first line in any JS file loaded on the page. If the alert does not show up, check the browser's settings to see if JS is enabled for that site.

If the alert does show up and the page still does not load the expected JS, it's likely that one or more features in your code is not supported on that browser/device. A compatibility function with a list of all the features can provide useful feedback. Some features are under window, others are under navigator. For actual mobile devices or any other environment where console output is not visible, swap out console.warn and console.log with alert.

In my own use case, SharedWorker is compatible with Chrome on Windows, but not compatible with Chrome on Android. Once I disabled all instances of new SharedWorker(), JS loaded as expected on desktop and mobile.

Note: checking for features within the SO code snippets might not work due to sandbox rules.

const ns = {};

ns.compat = () => {
  let ok = true;

  if (window) {
    for (let i of ['Worker', 'SharedWorker', 'getSelection', 'indexedDB', 'localStorage', 'IntersectionObserver', 'MutationObserver', 'sessionStorage', 'fetch', 'IDBTransaction', 'IDBKeyRange', 'IDBDatabase', 'WebSocket']) {
      if (window[i])
        continue;
      console.warn('Missing window feature: ', i);
      ok = false;
    }
  }

  if (navigator) {
    for (let i of ['serviceWorker', 'userAgentData', 'mediaDevices', 'geolocation', 'hid', 'onLine', 'language', 'permissions', 'clipboard']) {
      if (navigator[i])
        continue;
      console.warn('Missing navigator feature: ', i);
      ok = false;
    }
  }

  ok && console.log('All features: ok');
}

ns.compat();

Javascript not working on mobile but works on desktop

5 Answers5

Linked