Mein HTML-Code ist wie folgt:
%Vor% Es gibt zwei Funktionen in <h4> , wenn der Benutzer auf header, d. h. <h4> , klickt, dann muss ich ein Popup mit Bearbeitungsformular öffnen. Wenn der Benutzer auf Bild / Symbol löschen klickt, muss ich eine Löschfunktion ausführen.
Beide Funktionen editFun und deletefun führen Ajax-Aufrufe aus. Wenn der Benutzer in meinem Fall auf das Löschen-Symbol klickt, ruft er zuerst editFun function auf und ruft dann deleteFun auf. Wie kann ich die entsprechende Funktion für das Ereignis aufrufen?
Wenn Sie jQuery verwenden, entfernen Sie die inline JS und CSS und verschieben Sie sie in ihre eigenen Dateien:
CSS:
%Vor%HTML
%Vor%JS
%Vor%In diesem Fall können Sie einfach die Daten-ID auf dem übergeordneten Knoten verwenden. Datenattribute sind bei weitem die beste Möglichkeit, Daten auf Ihren HTML-Elementen zu speichern.
%Vor%Ereignisse im Browser werden entlang der DOM-Elementbaumstruktur verbreitet. Sie müssen dies stoppen, damit jeder Aufruf einzeln ausgeführt werden kann. Ihr Code legt auch Click-Handler inline fest. Daher würde ich Ihnen eher empfehlen, die Funktionalität von Ihrem Markup zu trennen.
Statt Click-Handler inline zu setzen, verwenden Sie jQuery:
%Vor% Und ähnlich für Ihre H4 . Beachten Sie, dass mein jQuery-Selektor in Ihrer Situation möglicherweise nicht geeignet ist, Sie aber bestimmte Elemente immer nach IDs oder CSS-Klassen unterscheiden können.
Wenn Sie Ihre Funktionalität für das Codieren nur der Datei (oder zumindest des Codeblocks in Ihrer Seite) externalisieren, wird Ihre Seite wesentlich wartbarer.
Setzen Sie Event-Handler im DOM-Ready-Event:
%Vor%Es scheint, dass Sie eine Liste mit einigen Elementen haben (da Sie etwas mit dem Element 35 tun), wo jedes durch das Symbol% co_de% und das Symbol für verschachteltes Löschen repräsentiert wird. Daher würde ich lieber Markup (und Code) ändern, um dies zu tun:
%Vor% Formatieren Sie Ihre Elemente stattdessen mit der CSS-Datei (Trennung der Probleme erneut entweder in einer separaten CSS-Datei oder in h4 block auf Ihrer Seite) und Sie können mir dafür später danken.
Der Code für diese Elemente würde dann wie folgt aussehen:
%Vor% Dies erstellt zwei gängige Klickhandler für jedes Element, das über entsprechende Datenattribute verfügen würde ( style oder data-edit-item ). Also kann Ihre Kopfzeile auch diese und einige "Edit" -Links haben. Legen Sie einfach die entsprechenden Werte für dieses bestimmte Datenattribut fest.
Es wird viel einfacher, wenn Sie jQuery verwenden, um Ihre Event-Handler zu binden. Sie müssen eine Änderung an Ihrem HTML vornehmen, damit Sie die ID (ich nehme an, die 35 ist auf jeden Fall eine ID) für diesen bestimmten Anruf identifizieren können.
%Vor%Dann die jQuery:
%Vor% EDIT: Vielleicht möchten Sie den Anfang des Codes in $('h4.milestonehead') ändern, je nachdem, ob all der H4-Elemente, die diese Funktionalität haben sollten, auch diese Klasse haben. Wenn sie es tun, nehmen Sie die Änderung vor. Wenn sie dies nicht tun, nehmen Sie die Änderung nicht vor (aber fügen Sie wahrscheinlich einige -Klassen hinzu, um sie von anderen H4-Elementen unterscheidbar zu machen).
Zuerst prüfen Sie, was Ihr Ziel ist. In Ihrer Veranstaltung sollten Sie
ausführen %Vor%Sie können event.target verwenden, um herauszufinden, welches Element im DOM Sie tatsächlich getroffen haben. Von hier aus können Sie diesen Wert verwenden, um zu bestimmen, ob Sie die Funktion ausführen sollen oder nicht. Wenn das Element beispielsweise "img" ist, führen Sie editFun () nicht aus!
Für etwas, das so einfach ist, ist es vielleicht besser, wenn Sie event.stopPropagation (); in Ihrer deleteFun-Funktion, da es sich um eine einfache "Entweder / Oder" -Situation handelt.
Weitere Informationen zu dieser Methode finden Sie hier: Wie Sie anhalten können Ereignis sprudelt auf Checkbox klicken
Tags und Links javascript html jquery