How to avoid "double touch" on an iPad using jQuery?

Question

I have a button that when pressed brings you to the top of the page and highlights a search input. It works fine except the iPad where the user has to click twice to force it to work.

It is not a matter or recognizing a touch event, but making sure that the touch event fires on the first try.

How can I avoid the "double touch" on an iPad?

  $('.my-button').click(function() { 
      $("html, body").animate({ scrollTop: 0 }, 500);
      $('.search').addClass('highlighted'); 
  });

possible duplicate of [How to recognize touch events using jQuery in Safari for iPad? Is it possible?](http://stackoverflow.com/questions/4755505/how-to-recognize-touch-events-using-jquery-in-safari-for-ipad-is-it-possible) — nicael, Mar 24 '15 at 20:18

score 1 · Accepted Answer · answered Mar 24 '15 at 20:51

    $('.my-button').bind("click",function() { 
        $(this).unbind(); 
        $("html, body").animate({ scrollTop: 0 }, 500); 
        $('.search').addClass('highlighted');
        $(this).bind();
    });

jquery bind does attach a handler to an event for a particular elements,so whenever you bind a click event it does not work on double click because you can bind a double click event separately. So when you hit a double click in this case after 1 st click it will unbind the click event so that click event does not repeat during the execution of the functinality and again bind it after all your functinality.Unbind removes a previously-attached event handler from the element. For more check bind and unbind

score 0 · Answer 2 · answered Mar 24 '15 at 20:19

0

Did you try the 'tap' jQuery event?

$('.my-button').on('tap', function() { 
   $("html, body").animate({ scrollTop: 0 }, 500);
   $('.search').addClass('highlighted'); 
});

answered Mar 24 '15 at 20:19

Edie Johnny

513
2
5
14

How to avoid "double touch" on an iPad using jQuery?

2 Answers2