Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 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:

enter image description hereenter image description here

like image 966
Ron I Avatar asked Jul 07 '16 04:07

Ron I


People also ask

Can mobile phones run JavaScript?

This powerful language is a web standard that's supported natively on most browsers across popular Android devices such as Samsung, LG, Xiaomi, ZTE, Huawei, HTC, Sony, Nokia, Google Pixel, One Plus and Motorola.

Why is my JavaScript code not working in Chrome?

Google ChromeIn the "Settings" section click on the "Show advanced settings..." Under the the "Privacy" click on the "Content settings...". When the dialog window opens, look for the "JavaScript" section and select "Allow all sites to run JavaScript (recommended)". Click on the "OK" button to close it.


3 Answers

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);
    });
like image 55
Ron I Avatar answered Sep 20 '22 00:09

Ron I


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.
like image 36
Ahmadreza Azimi Avatar answered Sep 21 '22 00:09

Ahmadreza Azimi


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;
like image 27
Krishnakumar_Muraleedharan Avatar answered Sep 22 '22 00:09

Krishnakumar_Muraleedharan