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:

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:

• javascript
• jquery

5 Answers 5

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

You have two options:

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

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;

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

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