Button onClick not working on mobile device

Question

I tried a whole bunch of things from:
onClick not working on mobile (touch)

document .click function for touch device

However nothing seems to work.

Here's what I have:

#modal-close {cursor:pointer;}

<button class="button" id="modal-close">ok</button>

function hideModal(){
    var modal = document.getElementById('modal');
    modal.style.display = 'none';
}

 $(function() {
        $('#modal-close').on('click touchstart',function (e) {
            hideModal();
            })
        });

What might I be doing wrong?

USe this '$('#modal-close').on('click touchstart',function () { hideModal(); })' — Rashid Javed, Aug 12 '16 at 16:11
i've seen this issue on ios. touch triggers hover state rather than triggering a click event. i believe we used this to solve the problem: https://github.com/ftlabs/fastclick — Robert Broden, Aug 12 '16 at 16:13
@RobertBroden Did you do simply just include it or was there any other code involved? — blue_zinc, Aug 12 '16 at 16:28
@blue_zinc another developer included it. it appears to have a Usage section that explains how to implement it — Robert Broden, Aug 12 '16 at 16:35

score 0 · Answer 1 · answered Aug 12 '16 at 16:19

0

Change the id of your button to modal_close. This may work for you. The id value acts like an identifier, so there is rule that we cannot use every symbol for naming identifiers.

answered Aug 12 '16 at 16:19

Esmatullah Adel

23
5

score -1 · Accepted Answer · answered Aug 12 '16 at 20:25

Turned out

 #modal-close {cursor:pointer;}

<button class="button" id="modal-close">ok</button>

function hideModal(){
    var modal = document.getElementById('modal');
    modal.style.display = 'none';
}

 $(function() {
        $('#modal-close').on('click touchstart',function (e) {
            hideModal();
            })
        });

Was valid

The thing that got me was hideModal() which used classList to add or remove classes. I switched it to className += and it worked as supposed to.

Button onClick not working on mobile device

2 Answers2