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 ac

Answer 1

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 2

actually , this has turned out to be couple of javascript changes in the code. calling of javascript method with ; at the end. placing script tags in body instead of head. and interestingly even change the text displayed (please "click") to something that is not an event. so Please rate etc.

turned debugger on safari, it didnot give much information or even errors at times.

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

UPDATE: I switched .bind to .on because it's now the preferred way says jQuery.

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. jquery.com

EXAMPLE:

$('.button').on("click touchstart", function() {

});

Below is the ultimate version of the click and touchstart event because it still fires even with new DOM objects that are added after the DOM has been loaded. Incorporating this ultimate click event solution for any scenario.

$(document).on("click touchstart", ".button", function () {

});

Answer 5

Use bind function instead. Make it more friendly.

Example:

var clickHandler = "click";

if('ontouchstart' in document.documentElement){
    clickHandler = "touchstart";
}

$(".button").bind(clickHandler,function(){
    alert('Visible on touch and non-touch enabled devices');
});

Answer 6

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)