0

I have tried and failed for over a week now to figure out why my iOS devices won't target a click on a specific element.

jsFiddle

In this JSFiddle you can try to click on 1. Background, then when you click on one of the colored buttons it works like a charm, unless you use an iOS device. Why is that? I can'f figure it out.

It is this .colors li that is not going to be trigged in iOS devices for some reason.

$('.colors li').click(function(){
    alert('yo');
});

Here are the actual code that doesn't even get triggered

$(document).on('click', '.bg ul.colors li', function () {
    $(this).siblings().removeClass('selected');
    $(this).addClass('selected');
    $('.case_background').css({ 'background': $(this).css('background') });

    caseObject.background = $(this).css('background');
});

Just found out that even if I say, nothing is getting logged: 

$(document).on('click', function(){ console.log('click') });
Jimmie Johansson
  • 1,875
  • 1
  • 19
  • 39
  • Could you try: `$('.colors li').attr('onclick','$.noop()').click(function(){ alert('yo'); });` or maybe just set `onclick` attribute as empty string – A. Wolff Mar 10 '14 at 12:59
  • maybe a dup of http://stackoverflow.com/questions/15095868/jquery-click-not-working-in-ios or http://stackoverflow.com/questions/9585689/ios-not-recognising-click-events or http://stackoverflow.com/questions/14795944/jquery-click-events-not-working-in-ios ? – Fabrizio Calderan Mar 10 '14 at 13:00
  • @A.Wolff sorry, but no luck there either. It is not even getting triggered. – Jimmie Johansson Mar 10 '14 at 13:04

2 Answers2

1

IOS have touch events.. not click use:

$('.colors li').bind("click touchstart", function(){
    alert('yo');
});
Hardy
  • 5,590
  • 2
  • 18
  • 27
  • It works well with click at the "Layout"-tab in my example. Tried it out with this now as well but no luck. Thanks for your reply tho :) – Jimmie Johansson Mar 10 '14 at 12:58
0

It's a well known problem with IOS devices, triggering the hover event when you click it once. So Hardy is right.

But to go further into why your "Layout"-tab works fine and your "Background"-tab isn't. It could be because you use LI in the "background"-tab and you use a Button element in the "Layout"-tab.

You could check this question for a fix to this problem: iOS automatic hover fix?

Community
  • 1
  • 1
Barry Meijer
  • 760
  • 4
  • 16