Trotz Ausführung des JS-Codes bleiben die HTML-Elemente unberührt

  • Hey,


    Ich habe ein HTML-Element, welches ich durch ein Klick-Event immer wieder neu erzeuge. In diesem ist für jedes Element auch ein Löschen Button. Dieses kann ich mit einem Klick auswählen. Dabei wird dann ein kleines Menü angezeigt, welches die einzelnen Daten des jeweiligen HTML-Elements anzeigt.


    Wenn ich nun während dieser Ansicht auf den Löschen Button, des jeweiligen HTML-Elements, klicke wird es zwar entfernt aber der JS-Code, welches das Menü wieder ausblenden und das Elemente-Menü anzeigen soll, zeigt einfach keine Auswirkung. Ich verstehe nicht warum.


    Ich habe schon viel gedebuggt und geschaut woran es liegen kann. Die entsprechende Funktion wird auch ausgeführt. Nur der Code in dieser Funktion unerklärlicherweise nicht.


    Hier ist der Code:

    JavaScript: EventListener
    1. $("#" + elementId).on("click", function(e){
    2. $("#"+ elementId).find(".delete").on("click", function(e){
    3. Elements.deleteElement(e, Menu.hideMenu); // Hier wird der Funktion deleteElement die Funktion hideMenu aus dem Modul Menu mitgegeben
    4. });
    5. }


    Hat jemand eine Idee woran dies liegen kann?


    Ich freue mich von euch zu hören.


    Schöne Grüße,
    Stef

  • Normalerweise ist es so, dass wenn du HTML-Elemente dynamisch dem DOM hinzufügst, du diesen nicht auf diese Art einen Event-Handler anbinden kannst sondern folgende Version benutzen musst:


    Code
    1. $(document).on('click', '#' + elementId, function(e) {

    Vielleicht ist das mal versuchenswert.

    Diese verschachtelten Event-Handler finde ich jetzt persönlich eher unschön, aber das ist sicher Geschmackssache. :)

  • Zitat

    Diese verschachtelten Event-Handler finde ich jetzt persönlich eher unschön, aber das ist sicher Geschmackssache. :)

    Das ist allerdings Ansichtssache, an anderer Stelle wurde dieses Verfahren mit dem Eventbubbling als "ultima ratio" und "best practice" propagiert :-) Gerade wenn es um dynamisch hinzu gefügte Elemente geht, finde ich diesen Weg sehr elegant und man vermeidet damit alle Probleme, die sonst damit verbunden sein können.

  • Guten Morgen,


    vielen Dank für eure Antworten. Ich habe diese Woche mehrere Methoden ausgetestet und auch die Ursache für dieses Verhalten gefunden.


    jonas3344 : Ich habe den EventListener nach deinem Vorschlag ausgetestet. Dort kam es jedoch dazu, dass egal wo ich im DOM klickte alle Elemente nach und nach entfernt worden sind.


    & wie würdest du das mit den EventListener regeln? Hast du da eine andere Vorgehensweise? Würde mich freuen, wenn du diese mit mir teilen kannst.


    Nun zur eigentlichen Ursache warum es nicht funktioniert hat: Wenn ich auf den Delete-Button klicke, wird das ganze HTML-Element selektiert, in dem dieser Button liegt. Nun habe ich über e falsche Werte erfasst, was dazu geführt hat, dass nach Ausführung der Hide-Funktion nochmal die show-Funktion ausgeführt wurde.


    Die Lösung war, ganz genau zu prüfen, ob der Delete Button geklickt worden ist. Falls ja wird einfach das Element gelöscht und die Hide-Funktion ausgeführt.


    Schöne Grüße,
    Stef