onClick not working on mobile (touch)

Question

Ok, what im trying to do is slide a div down when the user clicks a list item.

Problem is I am using Selectric https://github.com/lcdsantos/jQuery-Selectric which converts a Select box to an unordered list. So when the user clicks a which the source outputs as a list item I want a div to slide down.

On mobile safari (iOS7) the selectbox UI is the same as the standard selectbox UI.

What is the best practice when it comes to onClick for mobile devices?

Basic jquery:

$(window).load(function() {
        $('.List li').click(function() {
            $('.Div').slideDown('500');
        });
    });

You can see a working example HERE (Advanced search on the side bar)

Thanks.

Jai · Accepted Answer · 2014-02-25T13:47:16.677

92

better to use touchstart event with .on() jQuery method:

$(window).load(function() { // better to use $(document).ready(function(){
    $('.List li').on('click touchstart', function() {
        $('.Div').slideDown('500');
    });
});

And i don't understand why you are using $(window).load() method because it waits for everything on a page to be loaded, this tend to be slow, while you can use $(document).ready() method which does not wait for each element on the page to be loaded first.

edited Feb 25 '14 at 13:47

answered Feb 25 '14 at 13:42

Jai

72,925
12
73
99

2

Thanks a lot. Works like a charm. – Dale Feb 26 '14 at 10:05
1

check that you don't get 2 events triggered with using both click and touchstart though. – landed Jul 26 '16 at 08:53
@landed i guess `touchstart` works on touch devices so i don't think there would be any issues with `click` on touch devices. – Jai Jul 26 '16 at 08:57
1

You are probably right but if you are developing with desktop with emulating touch then it could be an issue in your app and then knowing this could be the reason was why i mentioned it. I prefer the small hammer lib now to get mobile event. – landed Jul 27 '16 at 08:33
Works like a charm! – MevlütÖzdemir Jul 23 '17 at 12:31
Well you really saved my whole day, and more. Thanks ! – Archimidis M Feb 24 '18 at 00:01

score 8 · Answer 2 · answered Feb 25 '14 at 13:42

8

you can use instead of click :

$('#whatever').on('touchstart click', function(){ /* do something... */ });

answered Feb 25 '14 at 13:42

Ram Patidar

656
1
6
15

8

Just a note: This code will trigger twice for a device that has both events fired or in the chrome dev tools, while mobile emulatin the view – wick3d Nov 10 '16 at 09:48

score 0 · Answer 3 · answered Mar 02 '21 at 13:48

I also don't know why, but these 2 buttons cannot be clicked on the ipad safari.

<div class="col-md-6 text-center">
  <h3>Title</h3>
  <div class="col-xs-12">
    <div class="panel panel-default">
      <div class="pd20 bg">
        <h4 class="title">House</h4>
      </div>
      <div class="panel-footer text-center">
        <button type="button" class="btn btn-warning btn-sm" ng-click="vm.clear()">
          <i class="fa fa-edit" aria-hidden="true"></i> Clear</button>
        <button type="button" class="btn btn-warning btn-sm" ng-click="vm.submit()">
          <i class="fa fa-edit" aria-hidden="true"></i> Submit</button>
      </div>
    </div>
  </div>
</div>

But if I fix it like this, it can be clicked

<div class="col-md-6 text-center">
  <h3>Title</h3>
  <div class="row">
    <div class="col-xs-12">
      <div class="panel panel-default">
        <div class="pd20 bg">
          <h4 class="title">House</h4>
        </div>
        <div class="panel-footer text-center">
          <button type="button" class="btn btn-warning btn-sm" ng-click="vm.clear()">
            <i class="fa fa-edit" aria-hidden="true"></i> clear</button>
          <button type="button" class="btn btn-warning btn-sm" ng-click="vm.submit()">
            <i class="fa fa-edit" aria-hidden="true"></i>Submit</button>
        </div>
      </div>
    </div>
  </div>
</div>

onClick not working on mobile (touch)

3 Answers3

Linked

Related