web-dev-qa-db-fra.com

l'événement de clic jQuery ne fonctionne pas dans les navigateurs mobiles

l'événement de clic jQuery ne semble pas se déclencher dans les navigateurs mobiles.

Le code HTML est le suivant:

<!-- This is the main menu -->
<ul class="menu">
   <li><a href="/home/">HOME</a></li>
   <li class="publications">PUBLICATIONS &amp; PROJECTS</li>
   <li><a href="/about/">ABOUT</a></li>
   <li><a href="/blog/">BLOG</a></li>
   <li><a href="/contact/">CONTACT</a></li>
 </ul>


 <!-- This is the sub-menu that is to be fired on click -->
 <div id="filter_wrapper">
   <ul id="portfolioFilter">
      <li><a href="/nutrition-related/">Nutrition related</a></li>
      <li><a href="/essays/">Essays and Nonfiction</a></li>
      <li><a href="/commissioned/">Commissioned works</a></li>
      <li><a href="/plays/">Plays and performance</a></li>
      <li><a href="/new-projects/">New Projects</a></li>
    </ul>
  </div>

Voici le script jQuery pour mobile:

$(document).ready(function(){
   $('.publications').click(function() {
       $('#filter_wrapper').show();
   });
 });

Lorsque je clique sur l'élément de liste "publications" d'un navigateur mobile, rien ne se passe.

Vous pouvez consulter le site ici: http://www.ruthcrocker.com/

Vous ne savez pas s'il existe des événements spécifiques à jQuery mobile.

jqueryandroidipadmobile
25
Jonathan Moriarty

Raminson a une bonne réponse si vous utilisez déjà (ou ne vous dérange pas) l'utilisation de jQuery Mobile. Si vous voulez une solution différente, pourquoi ne pas simplement modifier votre code comme suit:

changez LI avec lequel vous avez du mal à inclure une balise A et à appliquer la classe à la place de LI

<!-- This is the main menu -->
<ul class="menu">
   <li><a href="/home/">HOME</a></li>
   <li><a href="#" class="publications">PUBLICATIONS &amp; PROJECTS</a></li>
   <li><a href="/about/">ABOUT</a></li>
   <li><a href="/blog/">BLOG</a></li>
   <li><a href="/contact/">CONTACT</a></li>
 </ul>

Et votre code javascript/jquery ... renvoie false pour arrêter les bulles.

$(document).ready(function(){
   $('.publications').click(function() {
       $('#filter_wrapper').show();
       return false;
   });
 });

Cela devrait fonctionner pour ce que vous essayez de faire.

De plus, j'ai remarqué que votre site ouvre les autres liens dans de nouveaux onglets/fenêtres, est-ce intentionnel?

25
mason81

Je sais que c'est un vieux sujet résolu, mais je viens de répondre à une question similaire. Bien que ma réponse puisse aider quelqu'un d'autre, elle couvre d'autres solutions:

Les événements de clic fonctionnent un peu différemment sur les appareils tactiles. Il n'y a pas de souris, donc techniquement, il n'y a pas de clic ..__ Selon cet article - http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html - en raison de limitations de mémoire , les événements de clic sont uniquement émulés et distribués à partir d’éléments d’ancre et d’entrée. Tout autre élément peut utiliser des événements tactiles ou avoir des événements de clic initialisés manuellement en ajoutant un gestionnaire à l'élément HTML brut, par exemple pour forcer les événements de clic sur les éléments de la liste:

$('li').each(function(){
    this.onclick = function() {}
});

Maintenant, le clic sera déclenché par li, donc peut être écouté par jQuery.

Dans votre cas, vous pouvez simplement changer le programme d'écoute en élément d'ancrage, comme le fait très bien @ mason81, ou utiliser un événement tactile sur le li:

$('.menu').on('touchstart', '.publications', function(){
    $('#filter_wrapper').show();
});

Voici un violon avec quelques expériences - http://jsbin.com/ukalah/9/edit

38
Hugo Silva

Vous pouvez utiliser jQuery Mobile vclick event:

Evénement normalisé pour la gestion d'événements tactiles ou de clics de souris sur des périphériques tactiles.

$(document).ready(function(){
   $('.publications').vclick(function() {
       $('#filter_wrapper').show();
   });
 });
7
undefined

JqueryMobile: Important - Utilisez $(document).bind('pageinit'), pas $(document).ready():

$(document).bind('pageinit', function(){
   $('.publications').vclick(function() {
       $('#filter_wrapper').show();
   });
});
3
L.A.

Une solution pour toucher et cliquer dans jQuery (sans jQuery Mobile)

Laissez le site jQuery Mobile créer votre téléchargement et ajoutez-le à votre page. Pour un test rapide, vous pouvez également utiliser le script fourni ci-dessous.

Ensuite, nous pouvons recâbler tous les appels vers $ (…) .click () en utilisant l'extrait de code suivant:

<script src=”http://u1.linnk.it/qc8sbw/usr/apps/textsync/upload/jquery-mobile-touch.value.js”></script>

<script>

$.fn.click = function(listener) {

    return this.each(function() {

       var $this = $( this );

       $this.on(‘vclick’, listener);

    });

};
</script>

la source

2
ucefkh

La réponse de Vohuman m'a conduit à ma propre mise en œuvre:

$(document).on("vclick", ".className", function() {
  // Whatever you want to do
});

Au lieu de:

$(document).ready(function($) {
  $('.className').click(function(){
    // Whatever you want to do
  });
});

J'espère que ça aide!

1
Ralph David Abernathy

J'ai eu le même problème et l'ai corrigé en ajoutant "mousedown touchstart"

$(document).on("mousedown touchstart", ".className", function() { // your code here });

intéressé par d'autres

0
Samar Muhammad