jQuery click events not working in iOS [duplicate]

问题

Second update: Looks like one of my functions (resetFigures) was preventing the event handler, so moving that to the end of the bind function sorted it out.

Update: I realized after some basic testing that the click events were registering, it\'s just that the box fails to flip when tapped.

I have the basic aesthetic functionality of my site working in Chrome and Firefox, but it refuses to behave properly on iOS (test on iPhone 4 with iOS 6.1 and iPad with iOS 4.3.5).

You can view the site and of course the scripts (main.js) here: http://bos.rggwebdesigns.com/

I\'ve read that iOS doesn\'t really handle jQuery click events properly, but I\'m struggling to figure out a fix. A couple threads here on Stack Overflow mentioned the live() method, but implementing it like follows (as well as adding onclick=\"\" to the clickable elements) didn\'t seem to 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 also came across this interesting workaround project: http://aanandprasad.com/articles/jquery-tappable/. However, I had no luck with that 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 correct me if I\'ve been mislead, but according to this site, 3D transforms are supported in iOS with the appropriate prefixes: http://caniuse.com/transforms3d

回答1:

There is an issue with iOS not registering click/touch events bound to elements added after DOM loads.

While PPK has this advice: http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html

I've found this the easy fix, simply add this to the css:

cursor: pointer;

回答2:

Recently when working on a web app for a client, I noticed that any click events added to a non-anchor element didn't work on the iPad or iPhone. All desktop and other mobile devices worked fine - but as the Apple products are the most popular mobile devices, it was important to get it fixed.

Turns out that any non-anchor element assigned a click handler in jQuery must either have an onClick attribute (can be empty like below):

onClick=""

The element css needs to have the following declaration:

cursor:pointer

Strange, but that's what it took to get things working again!
source:http://www.mitch-solutions.com/blog/17-ipad-jquery-live-click-events-not-working

回答3:

You should bind the tap event, the click does not exist on mobile safari or in the UIWbview. You can also use this polyfill ,to avoid the 300ms delay when a link is touched.

来源：https://stackoverflow.com/questions/14795944/jquery-click-events-not-working-in-ios

标签

jquery

ios

css3

click

transform