Wednesday, 15 June 2011

jQuery click events not working in iOS -



jQuery click events not working in iOS -

second update: looks 1 of functions (resetfigures) preventing event handler, moving end of bind function sorted out.

update: realized after basic testing click events registering, it's box fails flip when tapped.

i have basic aesthetic functionality of site working in chrome , firefox, refuses behave on ios (test on iphone 4 ios 6.1 , ipad ios 4.3.5).

you can view site , of course of study scripts (main.js) here: http://bos.rggwebdesigns.com/

i've read ios doesn't handle jquery click events properly, i'm struggling figure out fix. couple threads here on stack overflow mentioned live() method, implementing follows (as adding onclick="" clickable elements) didn't seem work:

$('.card').live('click touchstart', function() { var figure = $(this).children('.back'); var button = figure.find('.button'); var column = $(this).parents().eq(1); $('.column').removeattr('style'); column.css('z-index', 2000); resetfigures(); if(flipcard(this)){ swoosh.pause(); swoosh.currenttime = 0; swoosh.play(); } });

i came across interesting workaround project: http://aanandprasad.com/articles/jquery-tappable/. however, had no luck either:

$('.card').tappable(function() { var figure = $(this).children('.back'); var button = figure.find('.button'); var column = $(this).parents().eq(1); $('.column').removeattr('style'); column.css('z-index', 2000); resetfigures(); if(flipcard(this)){ swoosh.pause(); swoosh.currenttime = 0; swoosh.play(); } });

also, please right me if i've been mislead, according site, 3d transforms supported in ios appropriate prefixes: http://caniuse.com/transforms3d

there issue ios not registering click/touch events bound elements added after dom loads.

while ppk has advice: http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html

i've found easy fix, add together css:

cursor: pointer;

jquery ios css3 click transform

No comments:

Post a Comment