CODEWITHSUNDEEP
jqueryiosclick
Raphael Jeger
Raphael Jeger

Reputation: 5232

.on("click") does not work on iOS

I noticed that

$("body").on("click", "#id", function(event) {...

does not work on iOS while

$("#id").on("click", function(event) {...

works perfectly. Same site, same jQuery (latest), same DOM. I can't use the latter because #id is added dynamically.

Ideas?

Upvotes: 1

Views: 4564

Answers (2)

texelate
texelate

Reputation: 2498

If you want to add click and not use touch events you can do this (although it does involve agent sniffing):

// Check if it is iOS
var isiOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);

if(isiOS === true) {

    // Store -webkit-tap-highlight-color as this gets set to rgba(0, 0, 0, 0) in the next part of the code
    var tempCSS = $('a').css('-webkit-tap-highlight-color');

    $('body').css('cursor', 'pointer')                                    // Make iOS honour the click event on body
             .css('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)');     // Stops content flashing when body is clicked

    // Re-apply cached CSS
    $('a').css('-webkit-tap-highlight-color', tempCSS);

}

See more at http://www.texelate.co.uk/blog/post/124-add-a-click-event-to-html-or-body-on-ios-using-jquery/

Upvotes: 1

palaѕн
palaѕн

Reputation: 73966

Try as follows once:

$(document).on("click touchstart", "#id", function(event) {...

Upvotes: 14

Related Questions