Jquery click not working with ipad

Question

we have a web application which is using Jquery blockUI to open a pop up and do some action. All of this works fine on Safari, and IE 8. problem is with Ipad. none of the actions in pop up are responding. it just stays on that page. even close doesnot work. do we need to add anything else? here is the code that opens a page and click event for close.

<script> $(document).ready(function() {   $.ajaxSetup( {            cache:false    });          $("#sendInviteDiv").load("invite.htm?action=view&pid="+pid);             $.blockUI({ message: $('#sendInviteDiv'),                 centerY: 0,                     css: {                 top:  ($(window).height() - 550) /2 + 'px',                         left: ($(window).width() - 870) /2 + 'px',                         width: '870px'                 }             });             //var ua = navigator.userAgent;             //var event = (ua.match(/iPad/i)) ? "touchstart" : "click";             //alert(ua);              $('#closeInvite').click($.unblockUI);      $('#inviteBtn').click(function() { //script to load         //setPositionDetails('${formName}','inviteBtn');         }); }   });   </script> 

appreciate pointers.

javascript is turned on and popups are allowed in Ipad Safari settings.

Answer 1

I usually use

.bind("click touchstart", function(){  }); 

instead of:

.click(function(){  }); 

That way you are binding the the correct event. It's also quicker, the touch responds much faster than click for some reason.

Answer 2

I know this was asked a long time ago but I found an answer while searching for this exact question.

There are two solutions.

You can either set an empty onlick attribute on the html element:

<div class="clickElement" onclick=""></div> 

Or you can add it in css by setting the pointer cursor:

.clickElement { cursor:pointer } 

The problem is that on ipad, the first click on a non-anchor element registers as a hover. This is not really a bug, because it helps with sites that have hover-menus that haven't been tablet/mobile optimised. Setting the cursor or adding an empty onclick attribute tells the browser that the element is indeed a clickable area.

(via http://www.mitch-solutions.com/blog/17-ipad-jquery-live-click-events-not-working)