Javascript Not Working On Mobile But Works On Desktop

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 is

Solution 1:

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 linkvar show = $('[section="'+link+'"]');
      $('[section]').hide();
      $('body').find(show).fadeIn();
      $('html,body').scrollTop(0);
    });

Solution 2:

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;

Solution 3:

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.

Solution 4:

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