Webdesign, Tutorials und mehr - Webmasterpro.de

dynamisches erstellen von eventListener

herf, am Donnerstag den 27.10.2011 um 15:40:16

hi.

folgendes: ich hab eine funktion die bei bestimmten ereignissen aufgerufen wird und die für ein objekt einen eventListener bereit stellt, so:

1

document.getElementById( tag.text ).addEventListener( 'click', function() { alert("d"); }, false);

das problem: wird diese funktion mehrmals aufgerufen (auf verschiedenen objekten!), verschwinden die listener von zuvor, nur der letzte listener ist aktiv. hoffe das is verständlich.

die ids der elemente sind dabei verschieden, das steht fest.

is der effekt normal oder hab ich vllt irgendwo ganz anders nen bug drin und eigentlich müsste das gehen?

edit: hier ein konkretes beispiel:

1
2
3
4

for(k = 0; k < 10; k++){
                    document.getElementById("history").innerHTML += "<li id='" + k + "'>" + k + "</li>";
                    document.getElementById( k ).addEventListener( 'click', function() {    alert(k); }, false);    
                }

nur das letzte element reagiert letztendlich tatsächlich auf einen klick...

herf, am Donnerstag den 27.10.2011 um 16:12:49

ah ok das problem is wohl, dass ich innerHTML quasi immer überschreibe oder sowas.

jedenfalls, wenn ich mit document.createElement('div'); jeweils neue divs erstelle und jeweils einen listener hinzufüge, dann funktioniert alles...

bloß wie bekomm ich das geschickt gelöst? ich hab quasi ne liste mit einer maximalen anzahl von elementen bei der immer wieder welche nach kommen und alte raus gelöscht werden, queue mäßig halt. jemand ne idee für ne "schöne" lösung?

Sebastian Schwarz, am Donnerstag den 27.10.2011 um 17:38:48

Mir ist nicht ganz klar was du machen möchtest.

Derartige Fehler treten aber des öfteren auf, wenn variablen versehentlich global definiert werden (x anstatt var x).

In der schleife wird dann jeweils die gleiche variable immer und immer wieder überschrieben was zu dem Effekt führt das nur noch das letzte Element wie gewollt reagiert.

Check doch mal deine variablen Definitionen ob diese alle korrekt sind.

herf, am Donnerstag den 27.10.2011 um 17:48:36

naja ich weiß ja was der fehler war, ich hab innerHTML immer wieder ganz überschrieben und dann sind natürlich auch die listener von elementen die da vorher drin waren futsch

ich möchte eine liste von x elementen mit jeweils einem listener. aber diese liste is eine queue, also insbesondere dynamisch. die frage is jetzt halt ob ich bei jedem event, wo ein neues element dazu kommt, die alte liste lösche und wieder eine völlig neue erstelle.

das muss ich wohl tun oder?

also die liste könnte entweder wirklich eine liste sein aus <ul>....<li></li>...</ul>

oder einfach divs untereinander poitioniert oder so.

Sebastian Schwarz, am Donnerstag den 27.10.2011 um 17:56:18

Normalerweise müsste es reichen das entsprechende Element (li oder div) zu identifizieren, und es dann zu löschen bzw. einzufügen.

Jannik Zschiesche, am Donnerstag den 27.10.2011 um 18:21:34

Hallo,

das Problem ist, dass du eine anonyme Funktion übergibst, dessen Wert erst ausgewertet wird, wenn die Funktion aufgerufen wird.

D.h. zum Zeitpunkt des Aufrufs (also zum Zeitpunkt des Events!) wird der aktuelle Wert von k gesucht, und der ist nunmal dann 10.

Wenn du das umgehen willst, musst du das k an die Funktion binden.

Und das funktioniert so:

1
2
3
4
5
6
7

for(k = 0; k < 10; k++)
{
    (function (i) {
        document.getElementById("history").innerHTML += "<li id='" + i + "'>" + i + "</li>";
        document.getElementById( i ).addEventListener( 'click', function() {    alert(i); }, false);    
    })(k);
}

Probe-Version: http://jsfiddle.net/Tdghy/1/

Es wird eine anonyme Funktion erstellt, die direkt aufgerufen wird. Hierdurch wird das k an den Funktionsaufruf gebunden und damit auch an dein alert().

Ich empfehle, die Funktionsweise von anonymen Funktionen (Funktionsvariablen) noch einmal nachzulesen.