El evento de clic de jQuery no funciona en navegadores móviles

Question

el evento de clic de jQuery no parece activarse en los navegadores móviles.

El HTML es el siguiente:

<!-- 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> 

Este es el script de jQuery para móviles:

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

Al hacer clic en el elemento de lista "publicaciones" en un navegador móvil no pasa nada.

Usted puede ver el sitio aquí: http://www.ruthcrocker.com/

No

seguro de si hay jQuery Mobile eventos específicos.

Answer 1

Raminson tiene una buena respuesta si ya está (o no le importa) usando jQuery Mobile. Si desea una solución diferente, ¿por qué no modificar el código de la siguiente manera:

LI cambio que está teniendo problemas con incluir una etiqueta A y aplicar la clase allí en vez de la 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> 

Y su código javascript/jquery ... devuelve falso para dejar de burbujear.

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

Esto debería funcionar para lo que estás tratando de hacer.

Además, me di cuenta de que su sitio abre los otros enlaces en las nuevas pestañas/ventanas, ¿es eso intencional?

Answer 2

Puede utilizar jQuery Mobile vclick evento:

caso Normalizado para el manejo de eventos touchend o haga clic del ratón en dispositivos táctiles.

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

Answer 3

jquery mobile: Importante - Uso $(document).bind('pageinit'), no $(document).ready():

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

Answer 4

Sé que esto es un viejo tema resuelto, pero me acaba de responder una pregunta similar y, aunque mi respuesta podría ayudar a otra persona como cubre otras opciones de solución:

Los eventos de clic funcionan de manera un poco diferente en los dispositivos con capacidad táctil. No hay mouse, por lo que técnicamente no hay clic. De acuerdo con este artículo - http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html - debido a limitaciones de memoria, los eventos de clic solo se emulan y se envían desde el ancla y los elementos de entrada. Cualquier otro elemento podría utilizar eventos de toque, o tienen eventos de clic inicializados manualmente mediante la adición de un manejador al elemento HTML puro, por ejemplo, para obligar a los eventos de click sobre los elementos de lista:

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

Ahora clic va a ser activado por Li, por lo tanto, puede ser escuchado por jQuery.

---

En su caso, usted podría cambiar el oyente al elemento de anclaje como muy bien puesto por @ mason81, o utilizar un evento de toque en la li:

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

Aquí es un violín con algunos experimentos - http://jsbin.com/ukalah/9/edit

Answer 5

Una solución al tacto y Haga clic en jQuery (sin jQuery Mobile)

Vamos a la jQuery Mobile site build your download y agrégalo a tu página. Para una prueba rápida, también puede usar la secuencia de comandos proporcionada a continuación.

A continuación, se puede volver a colocar todas las llamadas a $ (...) .click() usando el siguiente fragmento:

<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> 

source

Answer 6

respuesta de Vohuman me llevan a mi propia aplicación:

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

En lugar de:

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

¡Espero que esto ayude!