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 found that when I made my binding more specific, it began to work on iOS. I had:

$(document).on('click tap', 'span.clickable', function(e){ ... });

When I changed it to:

$("div.content").on('click tap', 'span.clickable', function(e){ ... });

iOS began responding.

Answer 2

We have a similar problem: the click event on a button doesn't work, as long as the user has not scrolled the page. The bug appears only on iOS.

We solved it by scrolling the page a little bit:

$('#modal-window').animate({scrollTop:$("#next-page-button-anchor").offset().top}, 500);

(It doesn't answer the ultimate cause, though. Maybe some kind of bug in Safari mobile ?)

Answer 3

None of the upvoted solutions worked for me. Here's what eventually worked:

I moved the code which was in $(document).ready out, if it wasn't required in document ready. If it's mandatory to have it in document ready, then you move that critical code to jQuery(window).load().

Answer 4

Thanks to the previous commenters I found all the following worked for me:

Either adding an onclick stub to the element

onclick="void(0);" 

or user a cursor pointer style

style="cursor:pointer;"

or as in my existing code my jquery code needed tap added

$(document).on('click tap','.ciAddLike',function(event)
{
    alert('like added!'); // stopped working in ios safari until tap added
});

I am adding a cross-reference back to the Apple Docs for those interested. See Apple Docs:Making Events Clickable

(I'm not sure exactly when my hybrid app stopped processing clicks but I seem to remember they worked iOS 7 and earlier.)

Answer 5

I had a span that would create a popup. If I used "click touchstart" it would trigger parts of the popup during the touchend. I fixed this by making the span "click touchend".

Answer 6

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.