Prototype Event Handling

[Thomas J.S.]

Hallo,

hab da ein kleines Problem mit Eventhandling. In einer Webapplikation verwende ich prototype. Beim Laden der Webseite wird ein grösserer Control mit DOM erstellt, welcher am Schluss einem Div hinzugefügt wird.

Der Control wird zu 100% client side generiert (also javascript unter Verwendung von prototype und DOM2).

Nun hat der Control gewisse aktive Felder (td), welchen ich einenen click EventHandler hinzufüge. Auf einen solchen Klick wird der Control neu dargestellt (remove alter control, generieren neuer control, hinzufügen neuer control).

Event.observe(index,'click',function(evt) {
    var trigger = this;
    /* was auch immer du noch beim event machen willst */
    Event.stop(evt);
   }.bindAsEventListener(index));

index stammt bei mir aus einer "$A(...   .each(function(index) {" wobei du hier alles mögliche statt index angeben kannst (x, y, z, foo, bla ...was auch immer).

Worauf du aber achten musst ist, dass wenn du den Controll neu generiert, die neue generierten Sachen haben keinen blassen Schimmer von den Eventhandlern, die für die alten Sachen geneiert wurden!
Ich packte daher das Ganze in einer Funktion: "function initEvents(elem)" die ich beim neugenerieren meiner Elemente dann aufrufe:
ArrayMeinerElemente.each(function(elem) {
...
initEvents(elem);
});

Das ganze schaut dann bei mir so aus:

function NameMeinerFunktion(ArrayMeinerElemente, ..., ...) {
   ...

var machDochIrgendwas = function() {
     ...
     initEvents(ID-des-Element-in-dem-ich-neue-elemente-erzeugt-habe);
   };

...

function initEvents(elem) {
      var el = $(elem);
      $A(el. ... .each(function(index) {
         Event.observe(index,'click',function(evt) {
          ...
          el.machDochIrgendwas (); //methode zuweisen
         }
   }

//erste initialisierung der elemente und die events dazu
   ArrayMeinerElemente.each(function(elem) {
      ...
      initEvents(elem);
   });
}

Hoffe das Hilft.

Grüße
Thomas