jQuery .on('click') not working on some mobile browsers

[koenigsegg1]

I’m using the following code for a contact form.

$(".btn").on('click', function(){
$(".contact ,.overlay").removeClass("hidden");
$('body').addClass("open-modal");
})

But this doesn’t work on some mobile browsers. It works iOS Safari, Firefox, & 1Password, but not in Chrome, Google, or Opera Mini.
I tried 'click touchstart' but that doesn’t seem to work either. I even wrapped it inside (document).ready but I cant get it to work. How can I get this to work in all mobile browsers?

live demo here.

P.S. For some reason the demo on Codepen it working fine http://cdpn.io/yYmYQP

P.P.S I’m new to writing in JS/jQuery so please go into detail!

[Shikkediel]

Doesn’t make much sense to me but this stands out :

$(".btn").on('vclick', function(){

[koenigsegg1]

I tried using vclick but that didn’t work either.

[Shikkediel]

I didn’t see a plugin for that… it’s not regular JavaScript in any case. Can’t test it on those mobile browsers myself unfortunately. What happens if you do a simple alert() on mousedown touchstart?

[koenigsegg1]

I added this code:

$(".btn").on('mousedown touchstart', function(){
    alert("The btn was clicked.");
 });

… and it triggered an alert. I’m not shure why it can’t do a basic .removeClass.

How do you usually add/remove classes by clicking an element on mobile devices? Am I doing something wrong? Like I said, I’m very new to JS, so I don’t understand a lot of things.

[Shikkediel]

Using a click should normally work fine on any kind of browser. Not sure what’s going on here.

[nkrisc]

It works fine in your codepen but not on your site? Do you have any other libraries you’re using? If so, does it work if you remove those?

[koenigsegg1]

The page is only a demo contact form (a reduced test case), so the only library that I’m using on that page is jQuery (2.1.3). I even used the source that Codepen uses for jQuery. I tried adding jQuery Mobile to the page because I had seen some posts over at Stack Overflow suggesting this, but it didn’t work so I removed it.

I can’t figure out why this is not working. It’s so frustrating!

Feel free to use Element Inspector on the page if that would help you.

[koenigsegg1]

Is it possible that there is a problem with my web hosting provider? (I’m using GoDaddy)

I created a free account at 000webhost just to see if it would make a difference. I uploaded the same exact files and it worked perfectly. Why would it work differently on a different host?

[Shikkediel]

Seems to be some odd GoDaddy thing…

Topic link

[koenigsegg1]

Ok, so I re-wrote the page in notepad, and nothing changed.

When I first uploaded the files to the other server it worked just fine, but now it doesn’t want to work. Maybe at first I opened the page in Safari, not Chrome.

I just checked on an Android device and all browsers that I tested worked fine ( Browser, Chrome, Firefox, and Opera). It seems to be an iOS thing with Google Chrome and Opera. I found a similar unresolved issue on the Google Forums concerning Google Chrome.

Do you have any more suggestions?

[Author]

Posts