jQuery onclick not working on mobile

Question

I'm trying to activate a menu with jQuery with a click (touch) on mobile, but it is not working in mobile. When I do the 'window' resize to try the mobile look, it works with the click, but in an emulator or even trying it with my phone, it doesn't work.

HTML Markup

<img src="i/mobilemenu.jpg" id="mobileMenuButton" style="position:absolute; right:0;"/>

CSS:

#mobileNavigation {display:none}

Javascript Code:

<script type="text/javascript">
            $(document).ready(function(){
                    $('#mobileMenuButton').on('click touchstart',function(){

                            if ($('#mobileNavigation').css('display') == 'none') {
                                $('#mobileNavigation').css('display','block');
                            } 
                            else 
                            {
                                    $('#mobileNavigation').css('display','none'); }
                            });
                    });
                </script>

Try removing click and leave only touchstart, see if it makes a difference, not that that's your solution. — artm, Sep 16 '14 at 16:25
It worked accessing from my Android: http://jsfiddle.net/drn595w3/show/ — LcSalazar, Sep 16 '14 at 16:32
Just a TIP: You can replace all your show/hide process and conditions with this: `$('#mobileNavigation').toggle()` - See: http://jsfiddle.net/drn595w3/1/ — LcSalazar, Sep 16 '14 at 16:33
tried the toggle and still nothing, tried it on jsfiddle and it works thanks, but i don't know why on the page it doesn't work — vulcanR, Sep 16 '14 at 20:48

score 3 · Answer 1 · answered Sep 16 '14 at 16:33

3

Establish a click handler based on the client as such:

var clickHandler = ("ontouchstart" in window ? "touchend" : "click")

and use it whenever you want to listen to click events:

$(".selector").on(clickHandler, function() {...})

This way you can always make sure the proper event is being listened to.

answered Sep 16 '14 at 16:33

elad.chen

2,375
5
25
37

tried and doesn't work... i know is weird, every other developer that i've asked for help are also surprised that it doesn't work – vulcanR Sep 16 '14 at 20:46

optimus · Accepted Answer · 2014-09-16T16:44:43.287

1

<script type="text/javascript">
   $(document).ready(function(){
      $('#mobileMenuButton').on('mousedown touchstart',function(){
            var userAgent = window.navigator.userAgent;
            if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)||  userAgent.match(/Android/i)) {
         if ($('#mobileNavigation').css('display') == 'none') {
            $('#mobileNavigation').css('display','block');
         } else {
            $('#mobileNavigation').css('display','none'); 
         }
       }
      });
   });
</script>

Just provide the user agent.

edited Sep 16 '14 at 16:44

answered Sep 16 '14 at 16:17

optimus

834
1
10
22

Why should the OP try that? Please explain. – Felix Kling Sep 16 '14 at 16:21
2

mousedown on a mobile device? – elad.chen Sep 16 '14 at 16:34

score 1 · Answer 3 · answered Sep 16 '14 at 16:29

I remember when I was building a mobile app, elements that weren't links wouldn't pick up on the click event unless I gave them the CSS property of cursor: pointer. Perhaps this is a similar issue. Try giving the button that property in the style attribute.

Nachiket Bhosale · Answer 4 · 2017-11-01T11:22:45.617

Came across this question and realized the click (and touchstart) should work.

@vulcanR, it is not working in your case is because you already have #mobileNavigation as display: none; So, there is no place for the event to be triggered.

Instead, try the following code and it should work-

$(document).ready(function() {
    $('#mobileMenuButton').on('click touchstart', function() {
        if ($('#mobileNavigation').css('opacity') == '0') {
            $('#mobileNavigation').css('opacity','1');
        } else { 
            $('#mobileNavigation').css('opacity','0'); }
        });
    });
});

The reason behind this working is that opacity:0 retains the height and width of the element whereas display:none makes the dimensions zero, so there is no estate for the event. You could have also used visibility:hidden, but that doesn't listen to click event or any events in general.

jQuery onclick not working on mobile

4 Answers4

Linked