webentwicklung-frage-antwort-db.com.de

jQuery-Klick-Ereignisse funktionieren unter iOS nicht

Zweites Update: Es sieht so aus, als ob eine meiner Funktionen (resetFigures) den Event-Handler daran gehindert hat, ihn ans Ende der Bindefunktion zu verschieben, um ihn zu sortieren.

Update: Nach einigen grundlegenden Tests wurde mir klar, dass die Klickereignisse registriert wurden. Es ist nur so, dass die Box beim Tippen nicht umkippt.

Ich habe die grundlegenden ästhetischen Funktionen meiner Website in Chrome und Firefox), aber sie verhält sich unter iOS nicht richtig (Test auf iPhone 4 mit iOS 6.1 und iPad mit iOS 4.3.5).

Sie können die Site und natürlich die Skripte (main.js) hier ansehen: http://bos.rggwebdesigns.com/

Ich habe gelesen, dass iOS mit jQuery-Klickereignissen nicht richtig umgeht, aber ich habe Mühe, eine Lösung zu finden. Ein paar Threads hier auf Stack Overflow erwähnten die live () -Methode, implementierten sie jedoch wie folgt (sowie das Hinzufügen von onclick="" zu den klickbaren Elementen) schien nicht zu funktionieren:

$('.card').live('click touchstart', function() {
        var figure = $(this).children('.back');
        var button = figure.find('.button');
        var column = $(this).parents().eq(1);
        $('.column').removeAttr('style');
        column.css('z-index', 2000);
        resetFigures();
        if(flipCard(this)){
            swoosh.pause();
            swoosh.currentTime = 0;
            swoosh.play();
        }
    });

Ich bin auch auf dieses interessante Workaround-Projekt gestoßen: http://aanandprasad.com/articles/jquery-tappable/ . Damit hatte ich allerdings auch kein Glück:

$('.card').tappable(function() {
        var figure = $(this).children('.back');
        var button = figure.find('.button');
        var column = $(this).parents().eq(1);
        $('.column').removeAttr('style');
        column.css('z-index', 2000);
        resetFigures();
        if(flipCard(this)){
            swoosh.pause();
            swoosh.currentTime = 0;
            swoosh.play();
        }
    });

Bitte korrigieren Sie mich auch, wenn ich irregeführt worden bin, aber dieser Website zufolge werden 3D-Transformationen in iOS mit den entsprechenden Präfixen unterstützt: http://caniuse.com/transforms3d

64
Bobe

Es gibt ein Problem, bei dem iOS keine Click/Touch-Ereignisse registriert, die an Elemente gebunden sind, die nach dem Laden des DOM hinzugefügt wurden.

Während PPK diesen Rat hat: http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html

Ich habe festgestellt, dass dies die einfache Lösung ist. Fügen Sie dies einfach der CSS hinzu:

cursor: pointer;
243
BingeBoy

Als ich kürzlich an einer Web-App für einen Client arbeitete, stellte ich fest, dass alle Klickereignisse, die zu einem Nicht-Anker-Element hinzugefügt wurden, auf dem iPad oder iPhone nicht funktionierten. Alle Desktop- und anderen Mobilgeräte haben einwandfrei funktioniert - aber da die Apple) -Produkte die beliebtesten Mobilgeräte sind, war es wichtig, sie zu reparieren.

Es stellt sich heraus, dass jedes Nicht-Ankerelement, dem in jQuery ein Klick-Handler zugewiesen wurde, entweder ein onClick-Attribut haben muss (kann wie unten leer sein):

onClick=""

OR

Das Element css muss die folgende Deklaration haben:

cursor:pointer

Seltsam, aber das war nötig, um die Dinge wieder zum Laufen zu bringen!
Quelle: http://www.mitch-solutions.com/blog/17-ipad-jquery-live-click-events-not-working

54
saurabh kamble

Sie sollten das Tap-Ereignis binden, der Klick ist auf Mobile Safari oder in der UIWb-Ansicht nicht vorhanden. Sie können auch dieses Polyfill verwenden, um die Verzögerung von 300 ms zu vermeiden, wenn ein Link berührt wird.

2
elio.d