jQuery click handler not called on iPad

11,736

Solution 1

We could do the hackish thing and just add onclick to anything we want clickable. But the "right" way to do this seems to be using an iPad-appropriate event:

var hitEvent = 'ontouchstart' in document.documentElement
  ? 'touchstart'
  : 'click';
$('#dynamic').bind(hitEvent, function() {alert("works")});
$('#dynamic-with-onclick').bind(hitEvent, function() {alert("works")});
$('#dynamic-with-dynamic-onclick').bind(hitEvent, function() {alert("works")}).attr('onclick', '');

Another way to do it is to bind to multiple events and be happy with whichever one gets called.

I'm currently using the first solution; I might try the other one, as I think it's cleaner.

Solution 2

Its late to answer now, but for others searching for solution here is the answer:

iPad has a different behavior for non-anchor elements click event. It recognizes their first click event as hover.

The solution I found for this to work is

either adding onclick="" attribute to that element or

"cursor:pointer" css property.

Either of this solution will tell iPad that this element is a clickable area.

(via http://swsharinginfo.blogspot.in/2013/03/solution-for-click-event-issue-on-ipad.html)

Share:
11,736
ImaginaryCake
Author by

ImaginaryCake

Seth A. Roby is curious about everything. He writes Ruby, JavaScript, and Objective-C all day, and wishes IE would quietly disappear from the face of the earth. He lives in Costa Mesa, California with his wife, two daughters, one son, and two cats. He's pretty awesome; you'd like him.

Updated on June 09, 2022

Comments

  • ImaginaryCake
    ImaginaryCake over 1 year

    I have a project using jQuery and a lot of dynamically-generated content. There is a click handler on the upper-left-most element– the "initiative" score– and it works fine on desktop Safari but isn't called at all on Mobile Safari; the gray overlay never appears and no action is taken. It's the same story with the click handler on the Hit Points area (the 172 at right) and the status ("Add Status Effect" at bottom; confirm; it appears over the portrait): all work on desktop but not mobile Safari.

    I've reduced the code to the following:

    <html>
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script>
          $(function() {
            $('#dynamic').click(function() {alert("works")});
            $('#dynamic-with-onclick').click(function() {alert("works")});
            $('#dynamic-with-dynamic-onclick').click(function() {alert("works")}).attr('onclick', '');
          })
        </script>
      </head>
      <body>
        <ul>
          <li id='static' onclick='alert("works")'>If there's an onclick it's called</li>
          <li id='dynamic'>And if there's no onclick the iPad won't see other click events</li>
          <li id='dynamic-with-onclick' onclick=''>But if there is one all events are called</li>
          <li id='dynamic-with-dynamic-onclick'>And if we add one everything works</li>
        </ul>
      </body>
    </html>
    

    Update

    This appears to be much simpler now than when I originally asked this question 10 months ago; using modern Mobile Safari all click handlers will register as normal. So go forth and just use $(...).click(function() {})!

  • Irfan
    Irfan almost 11 years
    +1 document.documentElement did not work for me but document worked.
  • Viliam
    Viliam over 10 years
    The problem is that touchstart is trigerred even when the user tries to scroll.