jQuery点击事件在iOS中不工作 [英] jQuery click events not working in iOS

问题描述

b

第二次更新：看起来我的一个函数（resetFigures）阻止了事件处理程序，所以将其移动到绑定函数的末尾。 / p>

更新：我在一些基本测试后意识到点击事件正在注册，只是当点击时框不能翻转。

我有我的网站在Chrome和Firefox的基本审美功能，但它拒绝在iOS上正常运行（测试在iPhone 4与iOS 6.1和iPad的iOS 4.3.5）。

您可以在这里查看网站和脚本（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 （1）; 
 $（'。column'）removeAttr（'style'）; 
 column.css（'z-index'，2000）; 
 resetFigures $ b if（flipCard（this））{
 swoosh.pause（）; 
 swoosh.currentTime = 0; 
 swoosh.play（）; 
} 
} ）; 
  

我也遇到了这个有趣的解决方案项目：http://aanandprasad.com/articles/jquery-tappable/ 。
然而，我没有运气：

  $（'。card'）tappable ）{
 var figure = $（this）.children（'。back'）; 
 var button = figure.find（'。button'）; 
 var column = .parents（）。eq（1）; 
 $（'。column'）。removeAttr（'style'）; 
 column.css（'z-index'，2000）; 
 resetFigures（）; 
 if（flipCard（this））{
 swoosh.pause（）; 
 swoosh.currentTime = 0; 
 swoosh.play } 
}）; 
  

此外，如果我误导，请纠正我，但根据这个网站，3D变换支持在iOS中使用相应的前缀： http://caniuse.com/transforms3d

解决方案

iOS没有注册点击/触摸事件绑定到DOM加载后添加的元素时出现问题。

此建议： http://www.quirksmode.org/blog/archives/2010/09/click_event_del .html

我发现这很容易解决，只需将它添加到css：

  cursor：pointer; 
  

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

解决方案

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;

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