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! :)