CODE CODIFY.CLUB

jQuery click events not working on iPhone & iPad?

There is an issue with iOS not registering click/touch events bound to elements added after DOM loads. I found out about this problem when I had such a panel that I wanted to be entirely clickable.

Following are solutions
1) Using css style : I’ve found this the easy fix, simply add this to the css

<style>
.clickable-div
{
cursor: pointer;
}
</style>
 
 
2) Using jQuery : use touchevent for exemple:
 
$('.clickable-div').on('click touchstart',function(){
//your code
});
 

3) Haven’t tested this fully but since iOS fires touch events, this could work, assuming you are in a jQuery setting.

$('a').on('click touchend', function(e) {
var el = $(this);
var link = el.attr('href');
window
.location = link;
});
 

The idea is that Mobile WebKit fires a touchend event at the end of a tap so we listen for that and then redirect the browser as soon as a touchend event has been fired on a link.

V!ral

Developer, Technology aficionado, Beer Lover and founder of codify.club Network. Who shares a keen interest about website development, health issues, cancer awareness and other fun stuff.

Add comment

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.

Most popular

Most discussed