[gelöst] jQuery click funktioniert nicht auf Tablet

[smartin23]

Hallo zusammen,

entschuldigt bitte, ich habe schon wieder eine Kleinigkeit für die ich keine Lösung finde:

Ich benutze in meiner Visualisierung jQuery, um Button nach dem Anklicken einzufärben:

$('.buttonbox-inner').on('click', function() {
    $(this).addClass("active");
});

Ich auch schon mehrere Varianten probiert:

$('.buttonbox-inner').each(function() {
    this.onclick = function() {
        $(this).addClass("active");
    }
});

oder auch:

$( ".buttonbox-inner" ).click(function() {
  $(this).addClass("active");
});

Alle drei funktioneren auch auf dem PC und meinem iPad prima - aber auf meinem Android-Handy und dem Fire HD-Tablet tut sich nix.

Das Komische: Wenn ich den Code in eine normale Webseite einbinde, geht es auch auf Android-Geräten. Aber eben leider nicht in der Visualisierung.

Daher: Wie kann ich in einer Visualierung den click mit jQuery auslesen und nutzen - auch auf meinem Fire HD?

[liv-in-sky]

@smartin23 was nutzt du auf android? fully browser ?

[smartin23]

@liv-in-sky Ja, genau. Den Fully Browser. Habe es aber auch mit Chrome und IOBroker Vis probiert. Auf Fire HD Tablet und einem Google Pixel. Auf beiden Geräten reagiert die Visualisierung nicht auf click.

[liv-in-sky]

@smartin23 sagte in jQuery click funktioniert nicht auf Tablet:

$('.buttonbox-inner').on('click', function() { $(this).addClass("active"); });

in fully browser funktioniert es auf android

[smartin23]

@liv-in-sky Seltsam. Bei mir tut sich da genau gar nichts - im Gegensatz zu PC und iPad.

Woran könnte das denn sonst liegen, wenn es bei Dir funktioniert? Das ist ja exakt mein Code, den Du benutzt hast.

Trotzdem hilfreich zu wissen, dass es eigentlich gehen müsste - dann lohnt es sich, den Fehler zu suchen.

[liv-in-sky]

@smartin23

wie genau hast du das eingebunden? wo steht das script ?

hast du mal im fully setting gecheckt, ob da javascript enabled ist ?

[smartin23]

@liv-in-sky Das Script steht am Ende des HTML-Codes im HTML-Widget. Also ganz verkürzt so:

<div class='.buttonbox-inner'>
inhalt
</div>
<script>
$('.buttonbox-inner').on('click', function() {
    $(this).addClass("active");
});
</script>

Soweit ich nichts in den Settings übersehen habe, ist Javascript aktiv.

Wenn ich im Skript testhalber nur $('.buttonbox-inner').addClass("active"); einsetze, geht es auch. Nur click geht halt irgendwie nicht.

[liv-in-sky]

@smartin23

habe ich auch so gemacht

hier der test mit deinem script auf fully test auf meinem samsung handy - den click sieht man nicht

[liv-in-sky]

@smartin23

habe es auch auf meinem fire tablet 7 getestet - geht auch mit fully

[liv-in-sky]

@smartin23

die klasse active habe ich im css tab im vis editor definiert - könnte in der class was drinstehen, was fully nicht mag ???

[smartin23]

@liv-in-sky Okay, danke für Deine Mühe! Das gibt mir Hoffnung!

Ich verstehe zwar noch nicht, warum es nicht geht. An der class „active“ kann es auch nicht liegen, weil die ja grundsätzlich funktioniert, wenn ich sie direkt zuweise. Nur eben nicht über den click.

Aber gut, dass ich jetzt weiß, dass es grundsätzlich funktionieren muss - dann gehe ich mal ganz intensiv auf die Suche.

Also: Danke schon mal - ich gebe mal ein Update, wenn ich was rausfinde.

[liv-in-sky]

@smartin23 mir fällt auch nix mehr ein - du könntest auch die fully leute anschreiben - antworten relativ schnell

[smartin23]

@liv-in-sky Okay, super. Danke!

[OliverIO]

@smartin23

funktioniert es den im chrome browser auf dem android gerät?
wenn nein, dann könntest du mit den developer tools genauer reinschauen.

dazu musst du in den entwicklungseinstellungen des android geräts das usb debugging einschalten.
die entwicklereinstellungen aktiviert man, wen man sieben mal auf die seriennummer tippt.

im anschluss kann man im chrome browser auf dem pc
chrome://inspect eingeben
bei configure auf der seite trägt man die ip-adresse des android geräts ein.
danach erscheint auf der Seite ein Link, bei dem sich ein neues fenster öffnet mit den developer tools, aber diesmal schaut dieses auf den chrome browser auf dem android gerät
dann kannst du dort wie gewohnt (falls du damit schon mal gearbeitet hast) alle html elemente, css klassen, javascripte etc untersuchen und debuggen.
wenn du möchtest, das dein skript an einer bestimmten stelle hält, dann am besten an der stelle

debugger;

eintragen. also irgendwo vor deiner jquery zeile.
dann kannst du schauen, was auf dem android anderes passiert wie auf dem pc

Eine genauere Beschreibung hier
https://www.javacodegeeks.com/2021/01/how-to-debug-websites-on-android-with-different-browsers.html

für android und auch für ios geräte kann man sich aktuell noch merken, das egal welcher browser verwendet wird, immer ein system web view verwendet wird.
bei apple ist es safari/webkit (ja auch wenn man die chrome app öffnet) und bei android ist es chrome.
apple will sich da demnächst wohl öffnen und auch andere renderengines zulassen.

wenn jetzt das gerät entsprechend alt ist, dann kann die webview evtl noch nicht alles, was uU auf dem PC und auf anderen Geräten schon geht. Gemerkt hat man es in den letzten Jahren bei den ES6 Features. Mittlerweile ist es aber selten geworden.

[smartin23]

@oliverio Danke für die ausführliche Erklärung - das habe ich jetzt auch mal probiert, leider ohne Ergebnis.

Ich verstehe es einfach nicht...

Das hier ist mein aktueller Versuchsaufbau:

<div class="buttonbox-inner" id="jetztaber">
    hier klicken
</div>
<script>
    console.log("das hier kommt an");
    $('#jetztaber').on('click', function() {
        console.log("das hier kommt nicht an");
    });
    $('.buttonbox-inner').on('click', function() {
        console.log("das hier kommt nicht an");
    });
</script>

Und es ist, wie es da steht: Der erste Log kommt an, aber beim Klicken passiert einfach nichts bei Debugging. Keine Fehlermeldung aber auch keine Reaktion.

Achso: Habe es übrigens auf dem neuen Googel Pixel 7 Pro mit den allerneusten Updates probiert....

Wenn ich den gleichen Code auf eine normale Webseite stelle, geht es da auch. Nur innerhalb der VIS nicht - irgendwas scheint da diese Funktion zu blockieren. Aber was könnte das sein?

Ich fasse noch mal zusammen:
$(...).on('click', ...) geht hier:

• in VIS auf PC
• in VIS auf iPad
• in normaler Webseite auf meinen Android-Geräten

und geht nur NICHT

• in VIS auf Android

Ich verstehe es nicht...

[smartin23]

Hallo zusammen,

danke für Eure Mithilfe! Ich habe das Problem nach langem Suchen und Ausprobieren gefunden! Yeah!

Das Problem war die Swipe-Navigation, die ich in der VIS eingebaut hatte. Die Swipe-Navigation setzt anscheinend "click" unter Android außer Kraft. Als ich die rausgenommen hatte, ging es sofort!

Da muss man erstmal drauf kommen...

[OliverIO]

@smartin23
ja das ist außergewöhnliches verhalten.
gut das du dran geblieben bist.