jQuery单击事件在iOS中不起作用

Question

第二次更新:看起来我的一个函数(resetFigures)阻止了事件处理程序,所以将它移动到bind函数的末尾就将其排序了.

更新:我在经过一些基本测试后意识到点击事件正在注册,只是在点击时盒子无法翻转.

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

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

我已经读过iOS并没有真正正确地处理jQuery点击事件,但我很难找到解决方法.Stack Overflow上的一些线程提到了live()方法,但实现它如下(以及添加onclick=""到可点击元素)似乎不起作用:

$('.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-tappable/.但是,我也没有运气:

$('.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

Answer 1

iOS没有注册绑定到DOM加载后添加的元素的点击/触摸事件.

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

我发现这很简单,只需将其添加到css:

cursor: pointer;

Answer 2

最近在为客户端开发Web应用程序时,我注意到添加到非锚元素的任何点击事件都无法在iPad或iPhone上运行.所有台式机和其他移动设备都运行良好 - 但由于Apple产品是最受欢迎的移动设备,因此修复它非常重要.

事实证明,在jQuery中分配了一个click处理程序的任何非anchor元素都必须具有onClick属性(可以如下所示为空):

onClick=""

要么

元素css需要具有以下声明:

cursor:pointer

很奇怪,但这就是让事情再次发挥作用的原因!
来源:http://www.mitch-solutions.com/blog/17-ipad-jquery-live-click-events-not-working

Answer 3

您应该绑定点击事件，移动 safari 或 UIWbview 中不存在点击。您还可以使用这个polyfill，以避免触摸链接时出现 300 毫秒的延迟。