JQuery in Elementor

becks13

Hallo zusammen,

ich habe das Problem, dass mein JQuery Code nicht ausgeführt wird (direkt in Elementor in einem HTML-Widget eingegeben). Bestimmt für Euch Profis ein Klacks ;-) Ich bin da echt nicht so bewandert...

Folgender Code wird zB ausgeführt (schließt die Akkordeons beim Start):

Code

<script>
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
 $('.elementor-tab-content').css('display', 'none'); }, delay);
});
</script>

Folgender aber nicht:

Code

<a href="" id="button-test">testbutton</a>


<script>
    $("button-test").click(function(){
  alert('test');
});
</script>

Da erhalte ich immer die Fehlermeldung:
Uncaught TypeError: $ is not a function

Wie müsste es richtig sein?

Ich danke Euch herzlich, ich kenne mich leider nicht gut damit aus...

Liebe Grüße

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

danielgoehr

Ersetze im zweiten Code das $-Zeichen durch "jQuery". Das $-Zeichen darf bei Wordpress in jQuery nicht verwendet werden, da jQuery bei Wordpress normalerweise im noConflict-Modus läuft. Im ersten Fall funktioniert das $-Zeichen nur, weil du es als Parameter an die Funktion übergibst.

Generell bist du aber auf der sicheren Seite, wenn du grundsätzlich jQuery statt des $-Zeichens verwendest.

Konkret müsste es also

Code

jQuery("#button-test").click(function(){
  alert('test');
});

lauten.

Idealerweise solltest du den Code noch in eine document-ready Funktion "wrappen", wie in deinem ersten Beispiel. Dann kannst du sicher sein, dass dein Element auch existiert, bevor du das Click-Event daran hängst.

danielgoehr

Ach ich sehe gerade, der Selektor für dein Element ist auch falsch. Hier fehlt ein #, da es sich um eine id handelt. Ich habe es in meinem Beispiel ergänzt.

Und (wenn auch leicht OT): Ein a-Element mit leerem href dürfte nicht valide sein. Wenn es ein a-Element sein muss, verwenden eine # mit preventDefault(). Alternativ (einfacher und eigentlich sinnvoller): Verwende <span> statt <a>.

becks13

Super, vielen Dank @danielgoehr ! Hat mir absolut weitergeholfen. Sorry für die späte Antwort, habe lange nichts daran getan ;-)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

JQuery in Elementor

Jetzt mitmachen!