nicht angemeldet
Onclick-Attribut dynamisch setzten
Hallo Forum,
Mein Ziel:
Ich habe ein DIV-Element "bubble1", und ein darin enthaltenes DIV-Element "bubble1_content". Zweites enthält Text. Mit meinen Funtionen möchte ich nun diesen Text innerhalb von "bubble1_content" mit einem Textfeld bearbeiten und dann speichern. Dazu hab ich beide DIV's mit onclick ausgestattet. Funktioniert soweit ganz gut.
Aber damit ich bearbeiten kann, muss ich die Onclick-funktionen abstellen, solange das Formular angezeigt wird, was ich mittels folgendem Code erreiche:
var div = document.getElementById(divID+"_content");
document.getElementById(divID).setAttribute('onclick', '');
div.setAttribute('onclick', '');
Nun kann ich speichern und den Text anzeigen lassen, aber das erneute anschalten der Onclick-funktionen klappt irgendwie nicht (weder mit dem ersten, noch mit dem zweiten Code):
document.getElementById(divID).setAttribute('onclick', 'div_markieren('+"'"+divID+"'"+')');
document.getElementById(divID).onclick = "div_markieren('"+divID+"');";
Es wäre auch online zu sehen:
http://zally.de/mindmap/index.php
Nickname: "test" und Passwort: "test"
Meine Frage lautet nun, wie kann ich dem Browser sagen, das er die zwei Onclick-funktionen wieder belegt? Oder besser, was mache ich da falsch?
Mich interessiert nur der Browser Firefox. Konnte über Fehlerkonsole und Firebug leider nichts rausfinden.
-
Hallo,
vielleicht erstmal direkt mit div.onclick = function () { } ?
und dann in der funktion festlegen, wie die unterschiede sein sollen, indem du zb. mitzählst, ob schon geklickt wurde.
Gruß
jobo
-
vielleicht erstmal direkt mit div.onclick = function () { } ?
Ja halte ich auch für in Ordnung.
(siehe hier: http://zally.de/mindmap/versuch.html - beachte Quelltext!)und dann in der funktion festlegen, wie die unterschiede sein sollen, indem du zb. mitzählst, ob schon geklickt wurde.
Das einzige was ich eigentlich brauch ist die "divID", und diese versuch ich ja zu übergeben.
-
Hallo,
Das einzige was ich eigentlich brauch ist die "divID", und diese versuch ich ja zu übergeben.
aber doch als parameter und nicht als aneinanderreihung von strings, oder? du könntest aber viell. auch den wert in der funktion speichern.
Gruß
jobo
-
aber doch als parameter und nicht als aneinanderreihung von strings, oder? du könntest aber viell. auch den wert in der funktion speichern.
Es geht nur um das Befüllen des el.onclick.
Das Übergeben der "divID", also der ID des Objektes funktioniert ja wunderbar, solange ich nicht versuche anschließend diese el.onclick wieder zu befüllen?!
-
-
-
-
Zur Ergänzung hier noch ein Link direkt zur Problematik.
http://zally.de/mindmap/versuch.html
Dort wird nur das Ausgegeben was zu dem Fehler gehört.
Wenn man die Kommentarzeichen an einer der 6 möglichen Quellcodezeilen löscht, funktioniert auch die Ausgabe des <Textes nicht mehr.-
Hallo,
Das Registrieren der Event-Handler funktioniert hervorragend. Du hast dir allerdings ein ganz anderes Problem gebaut. Dein Aufbau ist sehr kompliziert und überladen. Ich weiß nicht, ob das nötig ist.
Jedenfalls gibst du drei verschachtelten Elementen jeweils Click-Event-Handler. Wenn du auf den Save-Button klickst, wird div_editieren aufgerufen. Darin setzt du die Event-Handler für zwei Divs weiter oben in der Element-Hierarchie. Der click-Event steigt nun auf (Bubbling) und löst auch diese beiden Handler aus. Diese führen jeweils div_markieren aus – also die Gegenfunktion. Klar, dass das nicht funktioniert. Er springt zurück in den Normalmodus und sofort wieder in den Editier-Modus.
Am besten überdenkst du diese Struktur einmal. Was du konkret ändern kannst, ist das Bubbling des click-Events beim Save-Button:
contentDiv.innerHTML = '<input id="edit" type="text" name="bubbleedit" value=""><input type="button" id="save-button" value="Save">'; document.getElementById("save-button").onclick = function (e) { e.stopPropagation(); div_editieren(divID); };Siehe Bubbling verhindern.
Mathias
-
Hallo,
Hi
Das Registrieren der Event-Handler funktioniert hervorragend. Du hast dir allerdings ein ganz anderes Problem gebaut. Dein Aufbau ist sehr kompliziert und überladen. Ich weiß nicht, ob das nötig ist.
Gibt da einen Tipp wie du das gesehen hast, bzw. ich das sehen kann. Mir ist nirgends was aufgefallen.
(Ich habe die 'Welt des Javascriptes' erst bis zum Level 4/50 gespielt ;)Jedenfalls gibst du drei verschachtelten Elementen jeweils Click-Event-Handler. Wenn du auf den Save-Button klickst, wird div_editieren aufgerufen. Darin setzt du die Event-Handler für zwei Divs weiter oben in der Element-Hierarchie. Der click-Event steigt nun auf (Bubbling) und löst auch diese beiden Handler aus. Diese führen jeweils div_markieren aus – also die Gegenfunktion. Klar, dass das nicht funktioniert. Er springt zurück in den Normalmodus und sofort wieder in den Editier-Modus.
Also wenn ich das nun richig verstehe, ist eigentlich mein 2. Aufruf von div_markieren() unnötig, weil es durch das Bubbling schon funktionieren müsste?
Ich versuch das morgen mal durch, aber ich meine ich habe den zweiten Aufruf erst rein gemacht weil der Text nicht klickbar war, der Hintergrund aber schon.<body> <form name="pageform"> <div id="pagescreen"> <div onclick="div_markieren('bubble1')" id="bubble1" class="rand"> <b class="o1"></b> <b class="o2"></b> <b class="o3"></b> <b class="o4"></b> <div id="bubble1_content" class="content">Mapname</div> <b class="u4"></b> <b class="u3"></b> <b class="u2"></b> <b class="u1"></b> <div id="copy">copy</div> </div> </form> </body>Auf jeden Fall mal danke für den Denkanstoß und Links!
-
Hallo,
Gibt da einen Tipp wie du das gesehen hast, bzw. ich das sehen kann. Mir ist nirgends was aufgefallen.
Dazu müsstest du mal beschreiben, was du im Ganzen vorhast. Wahrscheinlich hast du eine längere Liste mit solchen editierbaren Feldern? Dann kann man das ganze mit geschicktem Event-Handling einfacher lösen, z.B. zentral einmal anstatt mit Inline-JavaScript und hartkodierten IDs. Dein HTML-Code mit den vielen Elementen, Klassen und IDs sieht auch sehr unaufgeräumt aus. CSS und JS kann man i.d.R. sehr flexibel anwenden, sodass das HTML schlank bleibt.
Also wenn ich das nun richig verstehe, ist eigentlich mein 2. Aufruf von div_markieren() unnötig, weil es durch das Bubbling schon funktionieren müsste?
Ja. Es reicht, den Event-Handler weit oben im DOM-Baum zu registrieren. Dort kommt der Event auf jeden Fall an, wenn auf irgendein Kindelement geklickt wurde.
Das erlöst dich allerdings nicht davon, das Bubbling zu unterdrücken, solange das copy-DIV ebenfalls ein Kindelement ist.Mathias
-
Hallo,
Dazu müsstest du mal beschreiben, was du im Ganzen vorhast. Wahrscheinlich hast du eine längere Liste mit solchen editierbaren Feldern?
klar, kann ich dir das beschreiben:
Das ganze soll einmal ein Mindmapingtool werden.Server mit MySQL;
PHP holt die Daten und legt sie im HTML ab;
JS schiebt die Map per onMouseMove komplett,
JS schiebt einzelne Bubbles relativ zur ersten Bubble,
JS bearbeitet die Bubble,
JS speichert die bearbeitete Bubble in HTML und sendet sie an PHP..Ich glaube das erläutert schon wie viele solcher editierbaren Felder ich gedacht hatte. Eigentlich eines pro Mindmapelement. Allerdings wusste ich zu dem Zeitpunkt auch noch nichts vom Bubbling.
Weiter wollte ich das ganze dann in Richtung Live-Online-Bearbeitung zwischen mehreren Personen entwickeln. An diesem Ansatz bin ich aber noch nicht wirklich dran.
Dann kann man das ganze mit geschicktem Event-Handling einfacher lösen, z.B. zentral einmal anstatt mit Inline-JavaScript und hartkodierten IDs. Dein HTML-Code mit den vielen Elementen, Klassen und IDs sieht auch sehr unaufgeräumt aus. CSS und JS kann man i.d.R. sehr flexibel anwenden, sodass das HTML schlank bleibt.
Meinst du sowas wie
addEventListener( "click", showDiv, true );? Also einfach nicht im HTML?Das erlöst dich allerdings nicht davon, das Bubbling zu unterdrücken, solange das copy-DIV ebenfalls ein Kindelement ist.
Das copy-DIV ist ja unsichtbar, bzw. liegt sowieso außerhalb des Anzeigebereiches. Das kann da raus.
Wenn ich recht überlege, sollte ich doch einfach eine Funktion per onclick aus dem pagescreen laden, und dann über die Mauskoordinaten schauen was angeklickt wurde.
Und alle anderen DIVs sind dann ohne onclick. Soll ich die dann trotzdem aus dem DIV pagescreen rausnehmen oder nicht? :/BC.
-
Bubbling ist eine tolle Sache, wenn man weiß das das so ist!
Ich hab alle DIV-Elemente einfach nacheinander gelistet und habe die Eventlistner im Javascript gesetzt, nun sieht das HTML schöner aus.
Und zum bearbeiten habe ich jetzt ein neues DIV, das wird einfach über das andere gelegt, dann kann man auch nicht mehr die falschen Links anklicken.Wollte noch kurz Danke sagen! :)
-
-
-
-
-