Solution for Jquery click event not working on iPad


iPad has a different behavior for non-anchor elements click event.
It recognizes their first click event as hover. Thus though you have a working click event code, it will look like failing on iPad and it will take your day to find out the solution :)

The solution 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.

Lets check with a sample code:

So say for an example I have a div element 
<div id="myDiv" class="myClass" ></div>

I have attached click event to it 
$('#myDiv').live('click', onMyDivClicked);

and I have below CSS:
.myClass
{
/*some X css properties except cursor:pointer*/
}

.myClass:hover
{
/*some Y css properties along with cursor:pointer*/
}


Solution 1: Adding onclick="" to div
<div id="myDiv" class="myClass" onclick=""></div>

Solution 2: Adding "cursor:pointer" css property

Now don't get confused as you may say that I already have this css property inside my ".myClass:hover" class(which most developers follow)
But the thing is if you want to fix the iPad problem, you will have to add this property inside ".myClass" as shown below
.myClass
{
/*some X css properties along with cursor:pointer*/
}

.myClass:hover
{
/*some Y css properties along with cursor:pointer*/
}


Note: We can not point this behavior as a BUG. iPad has introduced it to support websites designed with hover effects.
Say for example, there is a website on which you have to hover to navigate to pages. For iPad there is no hover effect in reality, as user has to touch/click the element.
Thus for non-anchor elements which may require hover effects, iPad treats the first touch/click as hover.

Hope to see smile on your face after fixing this issue! :)

11 comments:

Zeph Yang said...

This is the right blog for anyone who wants to find out about this topic. You realize so much its almost hard to argue with you. You definitely put a new spin on a topic that's been written about for years.

Sagar Wagh said...

Thanks Zeph! It’s my pleasure to post solutions to the problems that most developers face.
I will keep sharing such stuff.

Jaydeep said...

Hi Sagar,

Can you help to convert below jscript code so that it will work on ipad.
Currently this works perfectly fine on computer and i can click on the buttons. on iPad when i click on these 2 buttons nothing happens.

Code is being used within the Oracle BI application which is supported on ipad.

Thanks & Regards,
Jaydeep

Jaydeep said...

Removed tags in order to post it

script type='text/javascript' language='javascript'
{

function clickCheckBox(name) {

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {

if (inputs[i].type == "checkbox") {

if (inputs[i].value == name) {
inputs[i].click();
}
}
}
}

}

/script
button onclick="clickCheckBox('Edit Comments')" type="button" style="background-color:#00AEEF;width: 115px;color:#FFFFFF;"Edit Comments button
[br/]
button onclick="clickCheckBox('Send Question')" type="button"style="background-color:#00AEEF;width: 115px;color:#FFFFFF;"Question button

Sagar Wagh said...

@Jaydeep:
Well if it’s an "input" button, it should work on iPad. It’s a weird behaviour for me too. Can you try below code?
onclick="javascript:clickCheckBox('Edit Comments');" type="button" style="background-color:#00AEEF;width: 115px;color:#FFFFFF;cursor:pointer;" />

onclick="javascript:clickCheckBox('Send Question');" type="button" style="background-color:#00AEEF;width: 115px;color:#FFFFFF; cursor:pointer;" />

Let me know whether it works.

JimmySky said...

Very useful! A lot of thanks!

Sagar Wagh said...

You are welcome Jimmy! :)

Alejandro Munoz said...

Thank you so much!!!

Anonymous said...

Thanks

Anonymous said...

could you plase write down the funktion onMyDivClicked ?
Thank you

Sagar Wagh said...

You can have any client side logic inside "onMyDivClicked " function. Still for you here is a sample code:

function onMyDivClicked(){
$.get('myUrl', function(result){
$('#someElement').html(result);
});
}

The code is having a get request and on success it is inserting result to one of the element on my page.

Please let me know if you want any other help.

Post a Comment