JQuery .on() ne fonctionne pas sous IPad

Bonjour,

J'utilise la méthode .on() de JQuery sur une interface qui fonctionne parfaitement sur ordinateur.
Mon problème est que cette méthode ne fonctionne pas sous IPad.

SI quelqu'un connait une solution pour contourner le plus simplement possible ce problème, je suis preneur.

Merci d'avance

(PS : Je dois rafraîchir autant de fois que voulu un container sur une page HTML depuis les infos du serveur)

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)

Après test, voilà ce que j'obtiens , sur PC :

<ul class="listeDossier">
   <li class="dossier"></li>
   <li class="dossier"></li>
[...]
</ul>

Test 1

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

Fonctionne !

Test 2

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

Fonctionne !

Test 3

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

Ne fonctionne pas.., ou tout du moins une seule fois.

Lors du PREMIER clique sur un .dossier, tous les .dossier du .listeDossier sont remplacé (par un bête .html()) et de nouveau lien avec la classe .dossier apparaissent. Problème ? Le Test 3 ne fonctionne plus dés lors que se sont des nouveaux éléments générés par AJAX. L’événement du Test 3 ne réagit plus, mais les autres continus de suivre le mouvement.


Sur tablette, le Test 1 et Test 3 ne fonctionne pas, le Test 2 reste à voir...

AU pire j'envoi par MP le site et un accès "CONSULTANT".

Tu verras par toi même.

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)

Je te remercie pour ta patience et tes explications claires.
Je vais tester cela et je te retiens au courant au plus tôt.
Peut être qu'un jour si tu as le même problème, tu auras directement la solution.

Bonne soirée à toi