Zdarzenie kliknięcia jQuery nie działa w przeglądarkach mobilnych

Question

Zdarzenie kliknięcia jQuery nie wydaje się być uruchamiane w przeglądarkach mobilnych.

HTML jest następujący:

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

Jest to skrypt jQuery dla urządzeń przenośnych:

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

Kiedy klikam „publikacje” element listy na mobilnej przeglądarki nic się nie dzieje.

Można przeglądać strony TUTAJ: http://www.ruthcrocker.com/

Nie wiem, czy istnieje jQuery mobile konkretne wydarzenia.

Answer 1

Raminson ma ładny odpowiedź, jeśli jesteś już (lub nie przeszkadza) przy użyciu jQuery Mobile. Jeśli chcesz inne rozwiązanie, dlaczego nie wystarczy zmodyfikować kod w następujący sposób:

zmiana LI że masz problemy z celu włączenia znacznika, a stosuje się klasę tam zamiast 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> 

Twój kod javascript/jquery ... zwraca false, aby przestać bąbelkować.

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

Powinno to zadziałać w odniesieniu do tego, co próbujesz zrobić.

Co więcej, zauważyłem, że twoja strona otwiera inne linki w nowych kartach/oknach, czy to celowe?

Answer 2

Można użyć jQuery Telefony vclick zdarzenie:

znormalizowanego zdarzenie do obsługi touchend lub kliknięcie myszą zdarzeń na urządzeniach dotykowych.

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

Answer 3

JqueryMobile: Ważne - Wykorzystanie $(document).bind('pageinit') nie $(document).ready():

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

Answer 4

wiem, że to jest rozwiązane stary temat, ale ja po prostu odpowiedział na podobne pytanie i chociaż moja odpowiedź może pomóc komuś innemu jako Obejmuje inne opcje rozwiązania:

Kliknij zdarzenia działają nieco inaczej na urządzeniach dotykowych. Nie ma myszy, więc technicznie nie ma kliknięcia. Zgodnie z tym artykułem - http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html - ze względu na ograniczenia pamięci zdarzenia kliknięcia są emulowane i wysyłane z elementów kotwicznych i wejściowych. Jakikolwiek inny element może wykorzystać dotykowe zdarzenia, lub kliknięcia wydarzenia ręcznie zainicjować przez dodanie obsługi do surowego elementu HTML, na przykład, aby wymusić kliknij zdarzeń na pozycji listy:

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

Teraz kliknij zostanie wyzwolony przez Li, dlatego może być słuchany przez jQuery.

---

Na razie można po prostu zmienić słuchacza do elementu kotwicy jako bardzo dobrze postawione przez @ mason81 lub użyć dotykowy zdarzenia na li:

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

Oto skrzypce z kilka eksperymentów - http://jsbin.com/ukalah/9/edit

Answer 5

rozwiązanie Wskaż i kliknij w jQuery (bez jQuery Mobile)

Niech jQuery Mobile site build your download i dodaj go do swojej strony. Aby przeprowadzić szybki test, możesz również skorzystać ze skryptu podanego poniżej.

Następnie możemy rewire wszystkie połączenia do $ (...) .Kliknij() stosując następujący fragment:

<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

odpowiedź Vohuman wiodą mnie do własnej realizacji:

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

Zamiast:

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

Mam nadzieję, że to pomoże!