JQuery .on() ne fonctionne pas sous IPad

Bonjour,

Quel events utilises-tu avec on() ?
Selon les périphériques, certains évènements sont utilisés autrement ou juste indisponibles. Par exemple, sur tablette, les évènements de souris, ce n'est pas top top.

Un bout de code?

Bonjour kustolovic et merci de ton apport :

J'utilise l’éventement click. Sans le .on(), ça fonctionne sur tablette, mais ça ne donne pas le résultat attendu, c'est à dire rafraîchir mon container autant de fois que souhaité :

 $('.dossier').click(function(e){
                var obj = this;
                //code..
          });

Maintenant la même chose, mais avec le .on(), qui là, ne fonctionne pas ( ) sur tablette :

 $(document).on('click', '.dossier', function(e){
                var obj = this;
                //code..
          });

J'ai fais le test. L'évenement click est bien géré sous tablette, mais appelé avec le .on(), plus de réaction. J'ai pourtant absolument besoin de cette méthode, ou d'un équivalent.

Ce n'est pas un problème de on.

Ceci devrait fonctionner:

$('.dossier').on('click', function(e){
  var obj = this;
});

Maintenant pour utiliser la délegation, si ceci ne fonctionne pas:

$(document).on('click', '.dossier', function(e){
  var obj = this;
});

c'est probablement parce que l'event click n'es jamais lancé sur document, qu'il ne remonte donc pas jusqu'à cet élément.
Tu n'aurais pas par hasard des on('click') ou des click() qui traineraient avec des return false dans ton code? (return false sur un event c'est le mal en jQuery)

mmmh

apparement un vieux bug de Safari mobile semble toujours présent: http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html ou suivant les cas l'événement click ne se lance et/ou ne se propage pas correctement.
Des ajustements peuvent être faits pour corriger cela: utiliser un <a> ou un <button> (ce qui est mieux de toute façon), ajouter un attribut onclick="" ou son équivalent en js, etc.

Le test 3 ne peut pas fonctionner dans tous les cas:

lorsque tu écris:
$('.dossier').on('click', function(e){});

Tu attaches un écouteur d'évènement sur tout les éléments qui ont une classe «dossier»
Si tu supprimes par la suite ces éléments pour les remplacer par des autres, ces derniers n'auront aucun écouteur attachés… D'où ça ne fonctionne qu'une fois.
2 solutions: réattacher (et donc redéclarer) les écouteurs après le remplacement ou utiliser la délégation comme tu le fais:

$('.listeDossier').on('click', '.dossier', function(e){});

Dans ce cas on attache l'écouteur sur les éléments de classe «listeDossier» qui, eux, ne seront pas supprimés. un paramètre permet de filtrer ensuite l'élément déclencheur de l'event parmi les enfants de «listeDossier». Mais pour cela fonctionne il faut que l'évènement «click» se propage de l'enfant à ses parents, ce qui semble poser des problèmes à safari mobile.

p.s. : Il semblerait que le bug soit partiellement résolu selon les versions d'IOS et que le test No 2 pourrait fonctionner (L'event se propage mais pas jusqu'au body/document). à voir donc.
Modifié par kustolovic (01 Apr 2015 - 16:50)