it-swarm.com.de

Jquery-Klick funktioniert nicht mit dem iPad

wir haben eine Webanwendung, die Jquery blockUI verwendet, um ein Popup-Fenster zu öffnen und Aktionen auszuführen. All dies funktioniert gut auf Safari und IE 8. Das Problem liegt bei Ipad. Keine der Aktionen im Popup reagiert. es bleibt einfach auf dieser Seite. Selbst das Schließen funktioniert nicht .. Müssen wir noch etwas hinzufügen? ____ Hier ist der Code, der eine Seite öffnet und auf das Ereignis zum Schließen klickt.

<script>
$(document).ready(function() {
  $.ajaxSetup( {
           cache:false
   });

        $("#sendInviteDiv").load("invite.htm?action=view&pid="+pid);
            $.blockUI({ message: $('#sendInviteDiv'),
                centerY: 0,
                    css: {
                top:  ($(window).height() - 550) /2 + 'px',
                        left: ($(window).width() - 870) /2 + 'px',
                        width: '870px'
                }
            });
            //var ua = navigator.userAgent;
            //var event = (ua.match(/iPad/i)) ? "touchstart" : "click";
            //alert(ua);

            $('#closeInvite').click($.unblockUI);

    $('#inviteBtn').click(function() {
//script to load 
       //setPositionDetails('${formName}','inviteBtn');

       });
}


});


</script>

zeiger zu schätzen wissen.

javascript ist aktiviert und Popups sind in den Ipad Safari-Einstellungen zulässig. 

37
Atchuta Vani

Ich benutze normalerweise 

.bind("click touchstart", function(){

});

anstatt:

.click(function(){

});

Auf diese Weise binden Sie das richtige Ereignis. Es ist auch schneller, die Berührung reagiert aus irgendeinem Grund viel schneller als das Klicken.

81
Rich Bradshaw

Ich weiß, dass dies vor langer Zeit gefragt wurde, aber ich habe eine Antwort gefunden, als ich genau nach dieser Frage gesucht habe.

Es gibt zwei Lösungen.

Sie können entweder ein leeres onlick-Attribut für das html-Element festlegen:

<div class="clickElement" onclick=""></div>

Oder Sie können es in css hinzufügen, indem Sie den Mauszeiger setzen:

.clickElement { cursor:pointer }

Das Problem ist, dass auf dem ipad der erste Klick auf ein Nicht-Ankerelement als Schwebeflug registriert wird. Dies ist nicht wirklich ein Fehler, da es bei Websites mit Hover-Menüs hilft, die nicht Tablet/Mobile optimiert wurden. Wenn Sie den Cursor setzen oder ein leeres onclick-Attribut hinzufügen, wird der Browser darüber informiert, dass das Element tatsächlich ein anklickbarer Bereich ist.

(über http://www.mitch-solutions.com/blog/17-ipad-jquery-live-click-events-not-working )

34
lachie_h

UPDATE: Ich habe .bind zu .on gewechselt, da jQuery jetzt die bevorzugte Methode ist.

Seit jQuery 1.7 ist die .on()-Methode die bevorzugte Methode, um Event-Handler an ein Dokument anzuhängen. jquery.com

BEISPIEL: 

$('.button').on("click touchstart", function() {

});

Nachfolgend ist die ultimative Version des Ereignisses click und touchstart aufgeführt, da es auch mit neuen DOM-Objekten ausgelöst wird, die nach dem Laden des DOM hinzugefügt werden. Integration dieser ultimativen Click-Event-Lösung für jedes Szenario. 

$(document).on("click touchstart", ".button", function () {

});
22
BBi7

Verwenden Sie stattdessen die Funktion bind . Machen Sie es freundlicher.

Beispiel:

var clickHandler = "click";

if('ontouchstart' in document.documentElement){
    clickHandler = "touchstart";
}

$(".button").bind(clickHandler,function(){
    alert('Visible on touch and non-touch enabled devices');
});
7
Samson

Dank der vorherigen Kommentatoren habe ich festgestellt, dass für mich Folgendes funktioniert:

Fügen Sie dem Element entweder einen Onclick-Stub hinzu

onclick="void(0);" 

oder Benutzer einen Cursor-Zeiger-Stil

style="cursor:pointer;"

oder wie in meinem vorhandenen Code mein Jquery-Code benötigt tap hinzugefügt

$(document).on('click tap','.ciAddLike',function(event)
{
    alert('like added!'); // stopped working in ios safari until tap added
});

Ich füge den Apple Docs für diejenigen, die daran interessiert sind, einen Querverweis hinzu. __ Siehe Apple Docs: Ereignisse anklickbar machen

(Ich bin mir nicht sicher, wann meine Hybrid-App die Verarbeitung von Klicks abgebrochen hat, aber ich erinnere mich, dass sie mit iOS 7 und früher gearbeitet haben.)

2

Ich hatte eine Spanne, die ein Popup erstellen würde. Wenn ich "click touchstart" verwendet habe, würden während des Touchends Teile des Popups ausgelöst. Ich habe dieses Problem behoben, indem ich die Spanne als "Klick Touchend" markiere.

0
Luke Wenke

Als ich meine Bindung genauer formulierte, begann ich mit iOS zu arbeiten. Ich hatte:

$(document).on('click tap', 'span.clickable', function(e){ ... });

Wenn ich es geändert habe:

$("div.content").on('click tap', 'span.clickable', function(e){ ... });

iOS begann zu reagieren.

0
djbp

Wir haben ein ähnliches Problem: Das Klickereignis auf einer Schaltfläche funktioniert nicht, solange der Benutzer die Seite nicht gescrollt hat. Der Fehler erscheint nur unter iOS.

Wir haben es gelöst, indem wir die Seite ein wenig scrollen:

$('#modal-window').animate({scrollTop:$("#next-page-button-anchor").offset().top}, 500);

(Die ultimative Ursache wird jedoch nicht beantwortet. Möglicherweise ein Fehler in Safari Mobile?)

0
Eino Gourdin

Anstatt sowohl das Klicken als auch das Berühren der Ereignisse zu definieren, können Sie einen Handler definieren, der aussieht, ob das Gerät mit Klicken oder Berühren funktioniert.

var handleClick= 'ontouchstart' in document.documentElement ? 'touchstart': 'click';
$(document).on(handleClick,'.button',function(){
alert('Click is now working with touch and click both');
});
0
Abhishek

Keine der aufgegebenen Lösungen funktionierte für mich. Folgendes hat letztendlich funktioniert:

Ich habe den Code, der sich in $(document).ready befand, verschoben, wenn er nicht in document ready benötigt wurde. Wenn es obligatorisch ist, es im Dokument bereit zu haben, verschieben Sie den kritischen Code nach jQuery(window).load().

0
user1849091

tatsächlich hat sich herausgestellt, dass dies ein paar JavaScript-Änderungen im Code ist. Aufruf der Javascript-Methode mit; am Ende . Platzieren von Skript-Tags in body anstelle von head . und ändern Sie interessanterweise sogar den angezeigten Text (bitte "klicken") in etwas, das kein Ereignis ist. also bitte bewerten etc.

der Debugger wurde auf Safari eingestellt und gab manchmal nicht viele Informationen oder sogar Fehler.

0
Atchuta Vani