Button click() wird doppelt ausgeführt


suntrop

Erfahrenes Mitglied
#1
Hi!
Meine click-Funktion wird seltsamerweise doppelt ausgeführt. Der Grund ist, glaube ich, dass der Button zweimal existiert.

Der Button ist in einem CMS (der Speichern-Button) und er existiert einmal oben, bevor man Titel, Content etc. eingibt und einmal unten am Seitenende. Wenn ich das richtig erkenne, dann ist der obere Button einfach eine Kopie mit JavaScript eingefügt. Jedenfalls ist im Quellcode der Button nur einmal zu finden, aber im gerendertem Code sind zwei Buttons.
Das Problem ist jetzt, wenn ich auf den Button oben klicke, dann steht in der Console zwei Mal "Klick".
Wenn ich aber den unteren Button klicke, dann wird es ein Mal geloggt.

Meine JS-Funktion:
Javascript:
$('.save').click(function () {
    console.log('Klick', this)
    return false;
});
Das ist die Ausgabe von console.log(this) … Klassen und data-Attribute gekürzt.

Der Button oben:
HTML:
<button id="submit_save_copy" class="save ui-btn" name="submit_save" value="Speichern" type="submit">Speichern</button>
Der Button unten:
HTML:
<button id="submit_save" class="save ui-btn" name="submit_save" value="Speichern" type="submit">Speichern</button>
Wie finde ich heraus, woher die doppelte Ausführung kommt? Es funktioniert übrigens auch nicht, wenn ich $('#submit_save').click() nutze, obwohl ja das kopierte Element mit _copy endet. Aber vielleicht wird das vom Browser auch automatisch eingefügt, damit keine doppelten IDs existieren.
 

ComFreek

Mod | @comfreek
Moderator
#2
Jedenfalls ist im Quellcode der Button nur einmal zu finden, aber im gerendertem Code sind zwei Buttons.
Für jede nichttriviale Seite möchte man statt dem Quellcode auch den DOM (via F12 in den meisten Browsern) betrachten.

Wie finde ich heraus, woher die doppelte Ausführung kommt?
Du meinst, welcher Code genau den zweiten Button einfügt, der nicht im HTML-Quelltext, aber später im DOM ist? Aus dem Stegreif wüsste ich nicht, ob die Devtools der gängigen Browser solche "Breakpoints on DOM Insertion" unterstützen. Möglich wäre es, da müsstest du googeln.

Aber vielleicht wird das vom Browser auch automatisch eingefügt, damit keine doppelten IDs existieren.
Dass Browser da arbiträr "_copy" einfügen, bezweifle ich ;)
Es funktioniert übrigens auch nicht, wenn ich $('#submit_save').click() nutze
Was heißt "funktioniert [...] nicht"? Möglicherweise führst du deinen JS-Code "zu früh" aus, d.h. bevor, der Button überhaupt vom restlichen JS-Code eingefügt wird. Dann läuft "#submit_save" ins Leere.
 

ComFreek

Mod | @comfreek
Moderator
#4
Dann hat der obere Button eventuell noch andere Klickhandler installiert. Das könnte man auch in den Devtools sehen.
Ist die Seite irgendwo online verfügbar?