jQuery evento click non funziona nei browser per dispositivi mobili

Question

l'evento click jQuery non sembra essere attivato nei browser mobili.

L'HTML è il seguente:

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

Questo è lo script jQuery per il mobile:

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

Quando scatto l'elemento della lista "pubblicazioni" su un browser mobile non succede nulla.

è possibile visualizzare il sito qui: http://www.ruthcrocker.com/

Non so se ci sono eventi specifici di telefonia mobile jQuery.

Answer 1

Raminson ha una bella risposta se sei già (o non dispiace) utilizzando jQuery Mobile. Se si desidera una soluzione diversa, perché non basta modificare il codice come segue:

cambiamento che LI hai problemi con per includere una Un tag e applicare la classe c'è invece del 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> 

E il tuo codice javascript/jquery ... restituisce false per smettere di ribollire.

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

Questo dovrebbe funzionare per quello che stai cercando di fare.

Inoltre, ho notato che il tuo sito apre gli altri collegamenti in nuove schede/finestre, è intenzionale?

Answer 2

È possibile utilizzare jQuery Mobile vclick evento:

evento normalizzato per la gestione di eventi touchend o clic del mouse su dispositivi touch.

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

Answer 3

JqueryMobile: Importante - Usare $(document).bind('pageinit'), non $(document).ready():

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

Answer 4

So che questo è un argomento vecchio risolto, ma ho appena risposto a una domanda simile, e anche se la mia risposta potuto fare a qualcun altro copre altre opzioni di soluzione:

Gli eventi di clic funzionano in modo leggermente diverso sui dispositivi abilitati al tocco. Non c'è il mouse, quindi tecnicamente non c'è clic. In base a questo articolo - http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html - a causa di limitazioni della memoria, gli eventi di clic vengono emulati e inviati solo dagli elementi di ancoraggio e input. Qualsiasi altro elemento potrebbe utilizzare eventi touch, o di avere eventi click inizializzati manualmente con l'aggiunta di un gestore per l'elemento HTML grezzo, per esempio, per forzare cliccare eventi su voci di elenco:

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

Ora fare clic sarà innescato da li, quindi può essere ascoltato da jQuery.

---

sul vostro caso, si può solo cambiare l'ascoltatore all'elemento di ancoraggio come molto ben messo da @ mason81, o utilizzare un evento di tocco sul Li:

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

Ecco un violino con alcuni esperimenti - http://jsbin.com/ukalah/9/edit

Answer 5

una soluzione al Touch e fare clic in jQuery (senza jQuery mobile)

Diamo il jQuery Mobile site build your download e aggiungerlo alla tua pagina. Per un test rapido, puoi anche utilizzare lo script fornito di seguito.

Avanti, siamo in grado di ricollegare tutte le chiamate a $ (...) .Cliccate() utilizzando il seguente frammento:

<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

risposta di Vohuman mi portano alla mia propria implementazione:

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

Invece di:

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

Spero che questo aiuti!