it-swarm.com.de

das jQuery-Klickereignis funktioniert in mobilen Browsern nicht

das jQuery-Click-Ereignis scheint in mobilen Browsern nicht ausgelöst zu werden.

Der HTML-Code lautet wie folgt:

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

Dies ist das jQuery-Skript für Handys:

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

Wenn ich in einem mobilen Browser auf den Listenpunkt "Publikationen" klicke, passiert nichts.

Sie können die Website hier anzeigen: http://www.ruthcrocker.com/

Nicht sicher, ob für jQuery mobile spezifische Ereignisse vorliegen.

25

Raminson hat eine nette Antwort, wenn Sie jQuery Mobile bereits verwenden (oder nichts dagegen haben). Wenn Sie eine andere Lösung wünschen, ändern Sie Ihren Code einfach wie folgt:

Ändern Sie das LI, mit dem Sie Probleme haben, indem Sie ein A-Tag einfügen und die Klasse dort anstelle des LI anwenden

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

Und Ihren Javascript/Jquery-Code ... geben Sie false zurück, um das Sprudeln zu stoppen.

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

Dies sollte für das funktionieren, was Sie versuchen.

Ich habe auch bemerkt, dass Ihre Website die anderen Links in neuen Registerkarten/Fenstern öffnet. Ist das beabsichtigt?

25
mason81

Ich weiß, dass dies ein gelöstes altes Thema ist, aber ich habe gerade eine ähnliche Frage beantwortet und obwohl meine Antwort jemand anderen helfen könnte, da er andere Lösungsmöglichkeiten abdeckt:

Click-Events funktionieren auf touchfähigen Geräten etwas anders. Es gibt keine Maus, also gibt es technisch keinen Klick. Gemäß diesem Artikel - http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html - aufgrund von Speicherbeschränkungen werden Click-Events nur von Anker- und Eingabeelementen emuliert und ausgelöst. Jedes andere Element kann Berührungsereignisse verwenden oder Klickereignisse manuell initialisieren, indem dem rohen HTML-Element ein Handler hinzugefügt wird, um beispielsweise Klickereignisse für Listenelemente zu erzwingen:

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

Jetzt wird der Klick von li ausgelöst, kann also von jQuery abgehört werden.


In Ihrem Fall können Sie einfach den Listener in das Ankerelement umwandeln, das von @ mason81 sehr gut gesetzt wird, oder ein Touch-Ereignis für das li verwenden:

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

Hier ist eine Geige mit ein paar Experimenten - http://jsbin.com/ukalah/9/edit

38
Hugo Silva

Sie können jQuery Mobile vclick event verwenden:

Normalisiertes Ereignis zur Behandlung von Touchend- oder Mausklickereignissen auf Touchgeräten.

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

JqueryMobile: Wichtig - Verwenden Sie $(document).bind('pageinit'), nicht $(document).ready():

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

Eine Lösung zum Berühren und Klicken in jQuery (ohne jQuery Mobile)

Lassen Sie die jQuery Mobile-Site Ihren Download erstellen und fügen Sie ihn Ihrer Seite hinzu. Für einen schnellen Test können Sie auch das unten stehende Skript verwenden.

Als Nächstes können wir alle Anrufe an $ (…) .click () mit dem folgenden Snippet erneut verkabeln:

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

Quelle

2
ucefkh

Vohumans Antwort führte mich zu meiner eigenen Implementierung:

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

Anstatt:

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

Ich hoffe das hilft!

Mit dieser Lösung können Sie wahrscheinlich alle Probleme mit mobilen Klicks lösen. Verwenden Sie nur die Funktion "click", aber fügen Sie dem Element in css: den Z-Index: 99 hinzu.

  $("#test").on('click', function(){
    alert("CLICKED!")
  });
#test{   
  z-index:99;
  cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div id="test">CLICK ME</div>

Guthaben: https://foundation.zurb.com/forum/posts/3258-buttons-not-clickable-on-iphone

1
PET

Ich hatte das gleiche Problem und habe es durch Hinzufügen von "mousedown touchstart" behoben.

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

von anderen befallen

0
Samar Muhammad