[ERLEDIGT] Probleme mit dem hide() bei dem Iphone/Ipad

[hakura]

Hallo Community,
ich habe ein Problem das ich nicht Lösen kann. Auf meiner Homepage öffne ich ein Fenster. In dem Fenster ist ein Kreuz rechts oben positioniert. Bei einem klick auf das Kreuz, wird das Fenster geschlossen. Alles funktioniert perfekt auf Desktop-Devices. Aber sobald ich die Seite auf einem Mobile oder Tablet-Device aufrufe, funktioniert das schliessen mit JQuery nicht. Es passiert nichts.

Hier mein Code fürs schliessen:

$( document ).on("click", ".close", function (event) {
$(".registrationForm").hide();
Ich verstecke hier die .registrationForm CSS-Klasse sobald auf die .close-Klasse geklickt wird.

Danke für die Hilfe.

 

[Tronjer]

Hmm, mal mit einem alert() versucht, ob der Eventhandler funktioniert? Vielleicht ist das Kreuz auf einem Touchscreen ja schwer zu treffen.

Alternativ würde ich ein Media Query einbauen, welches das Element bei kleinen Viewports automatisch ausblendet.

 

[Chronos]

Hm ich weiß jetzt nicht, ob das auch hier der Fall ist aber als ich letztens am iPad ein Click-Event an den body binden wollte ging es stattdessen nur am document und auch nur mit "touchstart" als zusätzliches Event neben click.

 

[Tronjer]

Dann versuche es doch mal anders. Sofern dein X nicht nachträglich ins DOM eingefügt wird, sollte es auch Eventdelegation funktionieren, die auf ein Parent aufgerufen wird.

Also:
$('.close').on('click', function(e) {.....});
$('.close').click(function(e) {...});

 

[hakura]

Das funktioniert beides nicht auf dem Iphone/Ipad. Was hat es mit dem touchscreen auf sich?

 

[Chronos]

Warum das so ist, kann ich dir nicht sagen aber dazu findet man einiges und bei mir war es eben genauso:
http://stackoverflow.com/questions/16154705/onclick-does-not-work-on-ios

Mein Listener sah so aus:

$(document).on('click touchstart', function(e) {
    // Code
});

ohne "touchstart" ging es eben nicht ^^

 

[hakura]

Also wenn ich es so schreibe:
$(document).on("click touchstart", ".close", function(event) {
$( ".registrationForm" ).hide();
});

Dann funktioniert es auf dem Iphone.
Das Fenster schliesst sich jetzt immer wenn ich auf das X klicke.
Vielen Dank für eure Hilfe.