# JavaScript läuft nicht zuverlässig **URL:** \ **Category:** Programmierung\ **Created:** [14. Februar 2018 um 13:04 UTC](https://forum.shopware.com/t/javascript-lauft-nicht-zuverlassig/51130 "2018-02-14T13:04:02Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![AlexG](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@AlexG](https://forum.shopware.com/u/AlexG)\ **Post date:** [14. Februar 2018 um 13:04 UTC](https://forum.shopware.com/t/javascript-lauft-nicht-zuverlassig/51130/1 "2018-02-14T13:04:02Z")
Untenstehender vereinfachter Code soll bei einem Klick auf myAction das entsprechende data-target togglen. Das Template wurde einmal in der index.tpl und einmal in einem Code Element in der EInkaufswelt included. Jedoch habe ich hier das Problem das sich das JavaScript manchmal dazu entscheidet korrekt zu funktionieren und mal wieder nicht. Meißt werden die Klassen nicht wie gewünscht getogglet. Das Theme wird vor Plugins injiziert und vom Responsive Theme abgeleitet. Überseh ich hier etwas, oder hat jemand eine Idee woran das liegen könnte? **Template:** ``` Some text Sometext Sometext Some content ```   **JavaScript:** ``` $(function() { function myFunction(elements) { $.each(elements, function(i, el){ var ele = $(el); ele.find('.myAction[data-target]').click(function() { $(this).toggleClass('is--active'); ele.find('.myContents').toggleClass('is--open'); ele.find($(this).attr('data-target')).toggleClass('is--active'); }); }); } myFunction($('.myContainer')); $.subscribe("plugin/swEmotionLoader/onLoadEmotionFinished", function(me) { myFunction($('.myContainer')); }); }); ```   ---
**Author:** ![simkli](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/simkli/32/13124_2.png) [@simkli](https://forum.shopware.com/u/simkli)\ **Post date:** [14. Februar 2018 um 14:12 UTC](https://forum.shopware.com/t/javascript-lauft-nicht-zuverlassig/51130/2 "2018-02-14T14:12:56Z")
Wie bindest du dein JavaScript ein? Wird es in der Theme.php inkludiert (wie hier beschrieben: [Using CSS and JavaScript in themes](https://developers.shopware.com/designers-guide/css-and-js-files-usage/#add-javascript-files)) Wenn ja: Dann sollte es keine Probleme geben, ansonsten gibt es eine RaceCondition. Das Javascript von Shopware wird asynchron geladen. Da könnte es passieren, dass dein Skript ausgeführt wird, bevor das von Shopware geladen wurde. Viele Grüße ---
**Author:** ![AlexG](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@AlexG](https://forum.shopware.com/u/AlexG)\ **Post date:** [14. Februar 2018 um 14:16 UTC](https://forum.shopware.com/t/javascript-lauft-nicht-zuverlassig/51130/3 "2018-02-14T14:16:53Z")
Schonmal danke für die Antwort! Ja, das JS wird über die Theme.php inkludiert. ---
**Author:** ![simkli](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/simkli/32/13124_2.png) [@simkli](https://forum.shopware.com/u/simkli)\ **Post date:** [14. Februar 2018 um 14:45 UTC](https://forum.shopware.com/t/javascript-lauft-nicht-zuverlassig/51130/4 "2018-02-14T14:45:28Z")
Kannst du mal prüfen, ob dein Event-Callback von plugin/swEmotionLoader/onLoadEmotionFinished überhaupt aufgerufen wird? Einfach mal vor myFunction($(’.myContainer’)); innerhalb der Callback-Funktion ein console.log(“funktioniert”); und prüfen, ob “funktioniert” in der Browser-Konsole steht. Viele Grüße ---
**Author:** ![AlexG](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@AlexG](https://forum.shopware.com/u/AlexG)\ **Post date:** [14. Februar 2018 um 16:27 UTC](https://forum.shopware.com/t/javascript-lauft-nicht-zuverlassig/51130/5 "2018-02-14T16:27:55Z")
Also es wird komplett geladen, ein Klick wird ebenfalls erkannt. Jedoch die Klassen werden nicht getogglet. ---
**Author:** ![simkli](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/simkli/32/13124_2.png) [@simkli](https://forum.shopware.com/u/simkli)\ **Post date:** [14. Februar 2018 um 22:21 UTC](https://forum.shopware.com/t/javascript-lauft-nicht-zuverlassig/51130/6 "2018-02-14T22:21:04Z")
Kannst du mal prüfen, wie oft die Funktion „myFunction“ aufgerufen wird? Wenn diese 2x aufgerufen wird, dann werden ja auch zwei Event-Listener an die Elemente gehängt. D.h. bei einem Klick, wird die Klasse gesetzt und sofort wieder entfernt. Verstehst du was ich meine? Viele Grüße ---
**Author:** ![AlexG](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@AlexG](https://forum.shopware.com/u/AlexG)\ **Post date:** [15. Februar 2018 um 13:52 UTC](https://forum.shopware.com/t/javascript-lauft-nicht-zuverlassig/51130/7 "2018-02-15T13:52:07Z")
Jep verstehe. War auch der Fall! Die Klassen wurden (zumindest im EKW-Element) direkt wieder entfernt. Beim Laden erhält nun “myContainer” die Klasse “.is–loaded” und der Funktionsaufruf findet via ``` myFunction($('.myContainer:not(.is--loaded)')); ``` statt. Ausser du hast noch eine bessere/schönere Idee das umzusetzen 🙂 Zumindest funktioniert das ganze einmal! Schonmal Herzlichen Dank! ---
**Author:** ![simkli](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/simkli/32/13124_2.png) [@simkli](https://forum.shopware.com/u/simkli)\ **Post date:** [15. Februar 2018 um 13:58 UTC](https://forum.shopware.com/t/javascript-lauft-nicht-zuverlassig/51130/8 "2018-02-15T13:58:36Z")
> Ausser du hast noch eine bessere/schönere Idee das umzusetzen  ![:)](https://dub1.discourse-cdn.com/flex013/resources/emoji/smile.png ":)") Ja, den offiziellen Weg ein Shopware JS-Plugin zu entwickeln :) [jQuery plugins and the StateManager](https://developers.shopware.com/designers-guide/javascript-statemanager-and-pluginbase/#introduction) Dort nimmt dir sowas der StateManager ab und es kann nicht passieren, dass das Plugin 2x für das gleiche Element initialisiert wird. Viele Grüße