jQuery 单击事件在 iOS 中不起作用 [英] jQuery click events not working in iOS

问题描述

第二次更新: 看起来我的一个函数 (resetFigures) 阻止了事件处理程序，因此将其移至绑定函数的末尾以解决问题.

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.

我的网站在 Chrome 和 Firefox 中具有基本的美学功能，但它拒绝在 iOS 上正常运行(在运行 iOS 6.1 的 iPhone 4 和运行 iOS 4.3.5 的 iPad 上测试).

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).

您可以在此处查看站点，当然还有脚本 (main.js):http://bos.rggwebdesigns.com/

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

我了解到 iOS 并没有真正正确处理 jQuery 单击事件，但我正在努力寻找修复方法.Stack Overflow 上的几个线程提到了 live() 方法，但如下实现它(以及将 onclick="" 添加到可点击元素)似乎不起作用:

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();
        }
    });

我还遇到了这个有趣的变通项目:http://aanandprasad.com/articles/jquery-可点击/.但是，我也没有运气:

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();
        }
    });

另外，如果我被误导了，请纠正我，但根据此站点，iOS 支持 3D 转换并带有适当的前缀:http://caniuse.com/transforms3d

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

推荐答案

iOS 存在未注册绑定到 DOM 加载后添加的元素的点击/触摸事件的问题.

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

虽然 PPK 有这个建议:http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html

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

我发现这很容易解决，只需将其添加到 css 中:

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

cursor: pointer;

这篇关于jQuery 单击事件在 iOS 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！