web-dev-qa-db-fra.com

Événements de clic jQuery ne fonctionnant pas sous iOS

Deuxième mise à jour: On dirait qu'une de mes fonctions (resetFigures) empêchait le gestionnaire d'événements de se déplacer. Le déplacement vers la fin de la fonction de liaison l'a donc trié.

Mise à jour: Après quelques tests de base, j'ai réalisé que les événements de clic étaient enregistrés, mais que la boîte ne pouvait pas être retournée lorsqu'elle était utilisée.

Je dispose des fonctionnalités esthétiques de base de mon site sous Chrome et Firefox, mais il refuse de se comporter correctement sur iOS (test sur iPhone 4 avec iOS 6.1 et iPad avec iOS 4.3.5).

Vous pouvez consulter le site et bien sûr les scripts (main.js) ici: http://bos.rggwebdesigns.com/

J'ai lu qu'iOS ne gérait pas vraiment les événements de clic jQuery, mais j'ai du mal à trouver une solution. Quelques discussions ici sur Stack Overflow ont mentionné la méthode live (), mais son implémentation est la suivante (tout en ajoutant onclick="" aux éléments cliquables) ne semble pas fonctionner:

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

Je suis également tombé sur cet intéressant projet de solution de contournement: http://aanandprasad.com/articles/jquery-tappable/ . Cependant, je n'ai pas eu de chance avec ça non plus:

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

Aussi, corrigez-moi si j'ai été trompé, mais selon ce site, les transformations 3D sont prises en charge dans iOS avec les préfixes appropriés: http://caniuse.com/transforms3d

jqueryioscss3clicktransform
64
Bobe

Il y a un problème avec iOS qui n'enregistre pas les événements de clic/toucher liés aux éléments ajoutés après le chargement de DOM.

Alors que PPK a ce conseil: http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html

J'ai trouvé cela la solution facile, ajoutez simplement ceci au fichier css:

cursor: pointer;
243
BingeBoy

Récemment, lorsque je travaillais sur une application Web pour un client, j'ai remarqué que les événements de clic ajoutés à un élément autre que l'ancrage ne fonctionnaient pas sur l'iPad ou l'iPhone. Tous les ordinateurs de bureau et autres appareils mobiles fonctionnaient bien - mais comme les produits Apple sont les appareils mobiles les plus populaires, il était important de le réparer.

Il s'avère que tout élément non ancre auquel un gestionnaire de clics a été attribué dans jQuery doit avoir un attribut onClick (peut être vide comme ci-dessous):

onClick=""

OR

L'élément css doit avoir la déclaration suivante:

cursor:pointer

Étrange, mais c'est ce qu'il fallait pour que les choses fonctionnent à nouveau!
source: http://www.mitch-solutions.com/blog/17-ipad-jquery-live-click-events-not-working

54
saurabh kamble

Vous devez lier l'événement tap, le clic n'existe pas sur le safari mobile ou dans la vue UIWbview. Vous pouvez également utiliser ceci polyfill , pour éviter le délai de 300 ms lorsqu'un lien est touché.

2
elio.d